Question

我的JQuery代码中有一些奇怪的行为。我想在我的标签中切换类：（

这里的HTML：

<fieldset>
<p>
<label class="" for="mse2_resource|parent_0">
<input id="mse2_resource|parent_0" class="" type="checkbox" checked="" value="56" name="resource|parent">
<span>✔</span>
Text 1
</label>
</p>
</fieldset>

和JQuery：

$('fieldset p').click(function(){
  $(this).toggleClass('active');

  console.log(this);
});

我不明白为什么脚本一次这样做：

<p class="active">
<p class="">

Answer 1

如果您在this fiddle中展开已记录的对象并检查差异，您会发现基本上唯一的区别是event.target元素不同。

这告诉我，点击事件不仅针对<label>元素触发，还针对<input>触发。这是因为所有点击事件都被重定向到它所针对的输入。

解决此问题的方法是简单地检查目标是否为<label>元素。如果是，则事件处理程序不应该继续，因为我们知道无论如何都将立即为<input>触发事件。这可以通过事件处理程序开头的以下代码来完成：

if ($(e.target).is('label'))
    return;

但是，我建议将事件处理程序放在输入本身上。另外，我建议使用change事件处理程序：

＆＃13;

$('fieldset input').change(function (e) {
    $(this).closest('p').toggleClass('active');
});

＆＃13;

/* Make .active visible in this demo */
.active {
    color: #C77;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
    <p>
        <label class="" for="mse2_resource|parent_0">
            <input id="mse2_resource|parent_0" class="" type="checkbox" checked="" value="56" name="resource|parent">
<span>✔</span>
Text 1</label>
    </p>
</fieldset>

＆＃13;

Answer 2

您可以使用underscore.js实用程序或实现本机功能来实现去抖动功能。

var toggleAccordion = debounce(function (e) {
jQuery(this)
    .toggleClass("active")
    .parent()
    .siblings()
    .children()
    .removeClass("active");

// collapse where clicking
jQuery(this).next(".collapse").collapse("toggle");

}, 250);

function debounce(func, wait, immediate) {
var timeout;
return function () {
    var context = this,
        args = arguments;
    var later = function () {
        timeout = null;
        if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
};

//Call function and pass function accordion


jQuery(carouselActive).click(toggleAccordion);

toggleClass中的双重操作

2 个答案: