0

我正在尝试检查是否已单击特定元素，但在这样做时遇到了麻烦。这是我的 HTML：

<div id="my_special_id" class="switch switch-small has-switch" data-on="success" data-off="danger">
    <div class="switch-on switch-animate"><input type="checkbox" checked="" class="toggle">
        <span class="switch-left switch-small switch-success">ON</span>
        <label class="switch-small">&nbsp;</label>
        <span class="switch-right switch-small switch-danger">OFF</span>
    </div>
</div>

这是我的 jQuery：

<script type="text/javascript">
$(document).ready(function() {
    $('#my_special_id').click(function() {
        if ($('#my_special_id div:first-child').hasClass('switch-on')) {
            window.alert('ON!');
        }
    });
});
</script>

我猜我的 id "my_special_id" 不是实际被点击的？

4

5 回答 5

1

我猜点击事件应该有事件参数。

$(document).ready(function() {
    $('#my_special_id').click(function(e) {
        if (e.target check condition) {
            window.alert('ON!');
        }
    });
});

上面指定的参数 'e' 是包含有关点击事件的所有信息的事件对象。因此，如果您检查“e.tartget”下的所有信息，您将能够找出点击了哪一个。希望对你有帮助。干杯:)

于 2013-08-13T04:22:48.847 回答
0

由于您正在寻找单击复选框时的警报

$(document).ready(function() {
    $('#my_special_id input.toggle').click(function() {
        if ($('#my_special_id div:first-child').hasClass('switch-on')) {
            window.alert('ON!');
        }
    });
});

演示：小提琴

于 2013-08-13T04:25:00.247 回答
0

当您单击该特定类时只需发出警报switch-on

<script type="text/javascript">
     $(document).ready(function() {
         $('#my_special_id div:first-child .switch-on').on('click',function() {
                   window.alert('ON!');
          });
     });
</script>

甚至尝试像

$(document).ready(function() {
    $('#my_special_id').click(function() {
        if ($(this + 'div:first-child').hasClass('switch-on')) {
            window.alert('ON!');
        }
    });
});
于 2013-08-13T04:26:31.893 回答
0

click 事件将触发您绑定的任何操作。您唯一需要担心的是，如果您同时绑定了父母和孩子（例如，您已列出#my_special_id,.switch-small- 那么您必须查看e.target）。

话虽如此，您可以使用范围来限制 jQuery 如何找到div:first-child. 我不是 100% 确定你在追求什么，但以下似乎可以满足你的追求：

$(document).ready(function() {
    $('#my_special_id').click(function() {
        // look for div:first-child within `this` (where `this=#my_special_id`
        // per the .click selector above)
        if ($('div:first-child',this).hasClass('switch-on')) {
            window.alert('ON!');
        }
    });
});

如果您希望单独绑定到开/关，您可能需要稍微更改一下。我们仍然可以检查.switch-on，只需要以不同的方式遍历：

 // here we bind to the on/off buttons and not the container
$('#my_special_id .switch-small').click(function(){
  // you want the facsimilee of `div:first-child`, so (because we're now
  // within that node, we use .parent() to get back up to it
  var $firstChild = $(this).parent();
  if ($parent.hasClass('switch-on')){
     alert('ON!');
  }
});
于 2013-08-13T04:27:23.497 回答
0

这个 JavaScript 对我有用。

$(document).ready(function() {
    $('#my_special_id').click(function() {
        if ($('#my_special_id div:first-child').hasClass('switch-on')) {
            alert("On!");
        }
    });
});

你确定你有 JQuery 吗？

您的代码看起来不错，我认为您在其他地方有语法错误，或者您没有 JQuert。

这会提醒吗？

$(document).ready(function() {
    alert("Jquery works");
});
于 2013-08-13T04:28:02.273 回答