如果jQuery具有Class，則執行此操作

Question

我正在嘗試檢查是否已單擊特定元素，但是這樣做有麻煩。 這是我的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”不是實際被點擊的內容嗎？

Answer 1

我猜點擊事件應該有事件參數。

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

上面指定的參數“ e”是事件對象，其中包含有關點擊事件的所有信息。 因此，如果您檢查“ e.tartget”下的所有信息，則可以找出單擊了哪個信息。 希望對您有幫助。 干杯:)

Answer 2

由於您在單擊復選框時正在尋找警報

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

演示： 小提琴

Answer 3

單擊特定的班級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!');
        }
    });
});

Answer 4

click事件將觸發您受約束的任何事情。 唯一需要擔心的是是否同時綁定了父母和孩子（例如，您列出了#my_special_id,.switch-small 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!');
  }
});

Answer 5

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