使用Jquery在单击时旋转消息_Jquery

使用Jquery在单击时旋转消息

jquery

使用Jquery在单击时旋转消息,jquery,Jquery,我正在尝试创建一个div，当使用jquery单击消息时，它会在消息中循环。我不确定为什么以下方法不起作用： $(document).ready(function() { $("#box").html("message1"); $("#box").click(function() { if ($("#box").html("message1")) { $("#box").html("message2"); } else if ($("#box")

我正在尝试创建一个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。但是，当你再次单击它时，它不会再次更改。

因为

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

不检查

html

是否为

message1

，而是将

html

设置为

message1

，并返回与

#框

对应的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");
      }
});
});

您可能希望查看适合您的情况的方法，而不是

.html（）

，因为

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

不检查

html

是否为

message1

，而是将

html

设置为

message1

，并返回与

#框

对应的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");
      }
});
});

您可能希望查看适合您的情况的方法，而不是使用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>

//在您的区域中，定义后：
$（文档）.ready（函数（）{
//假设元素的id为“messages”
$（“#messages”）.messageListRotate（[“第一”、“第二”、“第三”）；
});

当然，你在工作中的要素是：

瞧。点击旋转。查看它的实际操作。

您正在使用setter。html（“value”）将设置被引用元素的值。因此，第一个$（“#box”）.html（“message1”）总是设置消息。我建议您为消息使用数组，或者如果您仍然希望使用当前方法，请使用检查消息值

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

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

//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>

//在您的区域中，定义后：
$（文档）.ready（函数（）{
//假设元素的id为“messages”
$（“#messages”）.messageListRotate（[“第一”、“第二”、“第三”）；
});

当然，你在工作中的要素是：

瞧。点击旋转。查看它的实际操作。

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");
  }
});
});

jsidle:

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");
  }
});
});

jsIDLE:

解决方案

非常感谢你。我还是javascript的新手：非常感谢。我还是javascript:P的新手