Question

我正在尝试创建一个div，它在用jquery点击时通过消息进行旋转。我不确定以下为什么不起作用：

$(document).ready(function() {
$("#box").html("message1");
$("#box").click(function() {
    if ($("#box").html("message1"))
      {
      $("#box").html("message2");
      }
    else if ($("#box").html("message2"))
      {
      $("#box").html("message3");
      }
    else if ($("#box").html("message3"))
      {
      $("#box").html("message1");
      }
});
});

单击div时，它会从消息1切换到消息2.但是再次单击它时，它不会再次更改。

Answer 1

因为

if ($("#box").html("message1"))

不要检查html是否为message1而是将html设置为message1并返回与#box对应的jQuery对象，以便上述代码永远是真的。这就是为什么你总是把内容改为message2。

$(document).ready(function() {
$("#box").html("message1");
$("#box").click(function() {
    var box = $(this);//Cache the object
    if (box .html() == "message1")
      {
      box.html("message2");
      }
    else if (box.html() == "message2")
      {
      box.html("message3");
      }
    else if (box.html() == "message3")
      {
      box.html("message1");
      }
});
});

您可能希望查看可能适合您的.text()方法，而不是.html()。

Answer 2

您正在使用setter。 .html（“value”）将设置引用元素的值。所以第一个$（“＃box”）。html（“message1”）总是设置消息。我建议您使用数组作为消息 - 或者如果您仍想使用当前方法，请使用

检查消息值

if($("#box").html() == "message1") //and then continue from here
    ...

而不是使用带有值的.html。 .html（）是getter，而.html（value）是setter。

编辑：我无法抗拒。当然，您可以每次设置代码以检查消息是否是某个消息 - 但您可以想象10个页面的工作量，每个消息包含10条消息。这个小插件将处理一个数组，其中包含您想要迭代的所有消息，只需很少的努力：

//plugin definition
(function($) {
    $.fn.messageListRotate = function(messageList) {
        var messages = messageList; //pass an array here
        var max = messages.length - 1;
        var pos = 1;

        //initializing the element with the first message           
        $(this).html(messages[0]);

        $(this).click(function() {
            $(this).html(messages[pos]);
            pos = pos == max ? 0 : pos + 1;
        });
    };
})(jQuery);

然后使用它：

//in your <head></head> area, after having it defined:
<script type="text/javascript">
    $(document).ready(function(){
        //assuming you element's id is 'messages'
        $("#messages").messageListRotate(["first", "second", "third"]);
    });
</script>

当然还有你的＆lt; body＆gt;中的元素：

<div id="messages"></div>

voilà。旋转点击。在行动here中查看。

Answer 3

jQuery html（）方法不测试true或false。使用html（）获取值，然后根据您的值进行测试。

试试这个：

$(document).ready(function() {
$("#box").html("message1");
$("#box").click(function() {
if ($("#box").html() == "message1")
  {
  $("#box").html("message2");
  }
else if ($("#box").html() == "message2")
  {
  $("#box").html("message3");
  }
else if ($("#box").html() == "message3")
  {
  $("#box").html("message1");
  }
});
});

jsfiddle：http://jsfiddle.net/blineberry/GC9B4/

Answer 4

解决方案

http://jsfiddle.net/vM8kY/9/

$(document).ready(function() {
    $("#box").html("message1");
    $("#box").click(function() {

        if ($("#box").html() == ("message3")) {
            console.log('a');
            $("#box").html("message1");
            return false;
        }

        if ($("#box").html() == ("message2")) {
            console.log('b');
            $("#box").html("message3");
            return false;
        }

        if ($("#box").html() == ("message1")) {
            console.log('c');
            $("#box").html("message2");
            return false;
        }




    });
});

使用Jquery单击时旋转消息

4 个答案: