jQuery 'if' statement not working

This should be a simple if statement, but it's not working for me. Essentially, when you click an element, I want that element to be highlighted and the ID to be put into a the variable value. However, if in the situation the same element is clicked twice, I want to value = NULL.

(function($){ 
  $(".list").click(function() {
     $(this).toggleClass("hilite");
     var temp = $(this).attr('id');
     if (value != temp) {
        var value = $(this).attr('id');
     } else {
       开发者_StackOverflow中文版 value = NULL;
     }
  });
})(jQuery);

---

Your primary problem is that you're "hoisting" the value variable by redefining it with the var keyword. This code can also be written more efficiently with a lot less code. This should work:

(function($) { 
    // somewhere outside click handler
    var value = '';
    // click handler
    $(".list").click(function() {
        var id = $(this).toggleClass('hilite').attr('id');
        value = (value === id) ? null : id;

        /* or if you prefer an actual if/else... 
        if (value === id) {
            value = null;
        else {
            value = id;
        }
        */
    });
})(jQuery); 

---

Edit: a couple general comments about the original snippet that might be useful:

• NULL should be null
• Try not to run the same selector multiple times, or recreate a jQuery object from the same DOM object multiple times - it's much more efficient and maintainable to simply cache the result to a variable (e.g., var $this = $(this);)
• Your comparison there is probably "safe", but better to use !== than != to avoid unintentional type coercion.
• Not sure how exactly you intended to use value in the original example, but always remember that variables are function-scoped in JavaScript, so your var value statement is hoisting the value identifier for that entire function, which means your assignments have no effect on anything outside that click handler.

---

You need to declare var value outside the scope of the function, so that its value is maintained across function calls. As it is, the value variable is lost right after it is set, because it goes out of scope.

var value = null;

(function($){ 
  $(".list").click(function() {
     $(this).toggleClass("hilite");
     var temp = $(this).attr('id');
     if (value != temp) {
        value = temp;
     } else {
        value = null;
     }
  });
})(jQuery); 

---

You could do:

(function($){ 
  var tmp = {};
  $(".list").click(function() {
     $(this).toggleClass("hilite");
     var id = $(this).attr('id');
     if (!tmp[id]) {
        var value = id;
        tmp[id] = true;
     } else {
        value = NULL;
        tmp[id] = false;
     }
  });
})(jQuery); 

In this way you use a tmp object that stores the state for all the different id's

---

It might not be skipping that statement, you might just be getting a confusion over the implied global "value" and the local "value".

(function($){ 
  $(".list").click(function() {
     $(this).toggleClass("hilite");
     var temp = $(this).attr('id');
     if (value != temp) { // <-----------------Implied global var called "value"
        var value = $(this).attr('id'); // <---Local variable valled "value"
     } else {
        value = NULL; // <---------------------Which one am I
     }
  });
})(jQuery); 

Also, it ought to be value = null as NULL is just an undefined variable.

This should be a working example of both points:

var value = null;

(function($){ 
  $(".list").click(function() {
     $(this).toggleClass("hilite");
     var temp = $(this).attr('id');
     if (value != temp) {
        value = $(this).attr('id');
     } else {
        value = null;
     }
  });
})(jQuery); 

---

Do you not need to declare value before you use it in the conditional statement?

---

you aren't setting a value in this function.

var value = "NULL";
(function($){ 
  $(".list").click(function() {
     $(this).toggleClass("hilite");
     var temp = $(this).attr('id');
     if (value != temp) {
        value = $(this).attr('id');
     } else {
        value = "NULL";
     }
  });
})(jQuery); 

---

The variable value is not defined. And it either needs to be a global variable or you could use jQuery's $('.selector).data() method to attach it to the element: http://api.jquery.com/data/

I also recommend using !== for the comparison, since that compares the type of the variable as well as the content.