将变量从php传递到javascript以用作ID

Question

I am attempting to build a small application where our editors can choose to hide some elements, in this case, Job Names, from a page when it is printed.

However, I cannot seem to get the addclass to work properly. It either does nothing or it adds the class to every checkbox.

To give my checkboxes a unique id, I am using the job name as the ID in php. These come from a database. Input:

<input type='checkbox' id='".$row['name']"'/><div class='tohide ".$row['name']."'>".$row['name']."</div>

Javascript:

var src = <?php echo json_encode($row['name']); ?>;
  $('input#src').change(function(){
    if(this.checked){
      $('.tohide').addClass('bold noprint');
    }else{
      $('.tohide').removeClass('bold noprint');
    }
  })

I have noticed that <?php echo json_encode($row['name']); ?> <?php echo json_encode($row['name']); ?> and <?php echo $row['name']; ?> <?php echo $row['name']; ?> do not give any results. I am using the same $row['name'] inside the php to generate proper ID'd for the checkboxes.

Client Side code:

<script type="text/javascript">
      var src = "";
      $('input#'+ src).change(function(){
        if(this.checked){
          $('.tohide').addClass('bold noprint');
        }
        else {
          $('.tohide').removeClass('bold noprint');
        }
      })
    </script>

When using json_encode I do get a value of null

Answer 1

This is just a string:

'input#src'

It's not going to interpolate a variable name within the string, it's just a literal string. To use the src variable, concatenate it:

'input#' + src

---

I also suspect that this may be incorrect:

var src = <?php echo json_encode($row['name']); ?>;

Though you really should look at the actual client-side code to confirm. But if the value is simply a string then I doubt you need json_encode . But you would definitely need quotes around a string:

var src = '<?php echo $row['name']; ?>';

Answer 2

The problem why all checboxes change is this:

$('.tohide').removeClass('bold noprint');

All your checkboxes match the expression ".tohide".

You'll want to do $('.tohide.'+this.id).removeClass('bold noprint') instead.

Disclaimer: not tested since you did not provide valid HTML and this is a HTML / JS question. The PHP part is irrelevant.