Question

我对javascript＆amp; amp; jQuery和我在单击按钮时切换类时遇到问题。所需的输出是让用户在单击按钮时添加项目。这很好。但是，当他们想要从列表中check项目时，当用户点击<li>内的按钮时，我无法将字体更改为删除。

我想我已经接近了，但有些不妥。任何帮助表示赞赏。

CODE：

function checkItem(element) {
    // toggles the class shopping-item__checked when button inside the parent <li> is clicked
    element.parent('li').toggleClass('.shopping-item__checked');
    console.log(element);
}

// Event listeners
$(document).ready(function () {
    console.log("ready!");
    $('#js-shopping-list-form').submit(function (event) {
        event.preventDefault();
        addItem(state, $('#shopping-list-entry').val());
        renderList(state, $('.shopping-list'));
    });
    $('ul.shopping-list > li').click(checkItem($(this).closest('shopping-item')));
});

HTML：

<div class="container">
    <h1>Shopping List</h1>
    <form id="js-shopping-list-form">
        <label for="shopping-list-entry">Add an item</label>
        <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
        <button type="submit">Add item</button>
    </form>
    <ul class="shopping-list">
        <li>
            <span class="shopping-item">apples</span>
            <div class="shopping-item-controls">
                <button class="shopping-item-toggle">
                    <span class="button-label">check</span>
                </button>
                <button class="shopping-item-delete">
                    <span class="button-label">delete</span>
                </button>
            </div>
        </li>

Answer 1

删除＆＃39;。＆＃39;来自toggleclass，

function checkItem(element) {
    // toggles the class shopping-item__checked when button inside the parent <li> is clicked
    element.parent('li').toggleClass('shopping-item__checked');
    console.log(element);
}

你也可以尝试以下替代

function checkItem(element) {
    // toggles the class shopping-item__checked when button inside the parent <li> is clicked
    if(element.parent('li').hasClass('shopping-item__checked')){
        element.parent('li').removeClass('shopping-item__checked');
    }else{
        element.parent('li').addClass('shopping-item__checked');
    }
    console.log(element);
}

Answer 2

您以错误的方式绑定事件处理程序。

$('ul.shopping-list > li').click(checkItem($(this).closest('shopping-item')));

您需要以下列方式传递事件信息。

function checkItem(event) {
    //event information is passed. target contains the target element on which the event was fired. in this case the check button
    var element = $(event.target);
    // toggles the class shopping-item__checked when button inside the parent <li> is clicked
    //element.parent('li').toggleClass('.shopping-item__checked');
    element.closest('li').find('span.shopping-item').css('text-decoration','line-through');
    console.log(element);
}

// Event listeners
$(document).ready(function () {
    console.log("ready!");
    $('#js-shopping-list-form').submit(function (event) {
        event.preventDefault();
        addItem(state, $('#shopping-list-entry').val());
        renderList(state, $('.shopping-list'));
    });
    //bind each check button with the check item function
    $('ul.shopping-list > li > div.shopping-item-controls > button.shopping-item-toggle').on('click', {event_data:this}, checkItem);
});

并修改你的html以删除按钮内的跨度，因为它是不必要的。

<div class="container">
    <h1>Shopping List</h1>
    <form id="js-shopping-list-form">
        <label for="shopping-list-entry">Add an item</label>
        <input type="text" name="shopping-list-entry" id="shopping-list-entry" placeholder="e.g., broccoli">
        <button type="submit">Add item</button>
    </form>
    <ul class="shopping-list">
        <li>
            <span class="shopping-item">apples</span>
            <div class="shopping-item-controls">
                <button class="shopping-item-toggle">
                    <!--<span class="button-label">check</span>-->
                    <!-- recommend not to use the span, since you will not be able to capture click event of button -->
                    check
                </button>
                <button class="shopping-item-delete">
                    <span class="button-label">delete</span>
                </button>
            </div>
        </li>

.closest()方法找到最匹配的祖先，而.find()方法找到最匹配的匹配子。

https://coderwall.com/p/wxjljq/jquery-find-and-closest-are-your-best-friends

Answer 3

首先，您要为jQuery click事件添加错误的回调函数。

$('ul.shopping-list > li').click(checkItem($(this).closest('shopping-item')));

您实际上是在传递undefined作为回调函数，因为您正在调用checkItem()并且该函数不返回任何内容。因此，每次点击li元素时，他们什么都不做。

让我们通过添加函数名称来解决这个问题而不需要任何限制。所以我们不是在呼唤它，我们只是将它作为参数传递。

$('ul.shopping-list > li .shopping-item-toggle').click(checkItem);

我还针对此示例中的点击检查按钮。现在，每次单击按钮时，它都会调用checkItem并传入一个事件对象，如下所示：checkItem(event);

查看你的checkItem函数，它期望一个元素被传递，让我们改变那个部分：

function checkItem(event) {
    // toggles the class shopping-item__checked when button inside the parent <li> is clicked
    $(this).closest('li').toggleClass('shopping-item__checked');
    console.log(this);
}

我在这里改变了一些事情。我将参数名称从元素更改为事件，然后将element.parent('li').blah.blah更改为$(this).closest('li').blah.blah

this将代表点击的元素，并将其包装在jquery选择器中，这样我就可以像最近的和toggleClass方法一样将一些东西链接到它。

现在我注意到这对第一个元素起作用，但它不适用于稍后添加的元素。这是因为每次调用addItem时都必须向新列表项添加单击事件。有一种更简单的方法，它需要我们首先修改我们添加click事件的方式。

$('ul.shopping-list').on('click', 'li .shopping-item-toggle', checkItem);

我们现在使用的这种技术称为事件分离。现在我实际上在整个购物清单上添加了点击事件，并且点击了在购物清单中点击的所有li .shopping-item-toggle项目。这意味着此时尚不需要添加元素，因为它们可以对其执行单击事件。它们可以在以后添加，它仍然可以使用。现在，当您添加新项目时，您可以单击它们，它们将触发点击事件。

在ul上切换类来改变字体

3 个答案: