Question

想要触发一个动作，但不确定最好的方法是什么。还在拿起jquery / javascript，所以我想在黑客入侵之前先征求意见。

在每个项目上都有一个带有切换（两个按钮）的无序项目列表。一旦他们全部被切换，如果他们都是A做某事，如果他们中至少有一个是B做不同的事情。

希望不要陷入界面速度，以便快速寻找。我猜我不得不在每次按键时都这样做吗？我想我可以把它绑定到最后一个项目，但这可能并不总是最后一个处理过的。

还认为我可以用“ABC”设置类似字符串的东西，并在每个项目更新后从字符串中删除它的特定字母，然后在字符串为空时执行函数。

我在想什么？从我读过的内容来看，你需要注意如何用jquery选择元素，因为像ID这样的选择比其他更快。

这是HTML的样子：

<li id="1"> 
    <h3 class="item_id">#17A</h3> 
    <div class="itemstatus">
        <span class="itemstate">Pending</span>
        <span class="statereason"></span>
    </div>
    <p>cheese</p>
    <span class="btns">
        <a href="#" class="greenButton" id="approve">True</a> 
        <a href="#" class="redButton" id="decline">False</a>
    </span> 
</li>

目前通过itemstate span contents

确定每个项目的状态

Answer 1

您可以将相同的事件处理程序附加到每个按钮按下。在该事件处理程序中，您只需检查所有按钮的状态。如果全部设置完毕，请处理它们并根据其设置选择您的操作。

如果您向我们展示实际的HTML并指定适当的类和ID以便能够遍历按钮，我们可以建议使用简单的jQuery。

稍微修改一下HTML（添加一些更有用的类）后，我想出了这段代码：

$("#questions .toggle").click(function() {
    // turn this button on, make sure other paired button is off
    $(this).addClass("pressed").siblings().removeClass("pressed");

    // check all buttons to see if each set has a chosen button
    var missingSelection = false;
    var allGreen = true;
    $("#questions .btns").each(function() {
        var pressed$ = $(this).find(".pressed");
        if (pressed$.length == 0) {
            missingSelection = true;
        } else {
            if (!pressed$.hasClass("greenButton")) {
                allGreen = false;
            }
        }
    });
    if (!missingSelection) {
        if (allGreen) {
            // code when all buttons are green
            $("#result").html("All Buttons Green");
        } else {
            // code when any buttons is not green
            $("#result").html("Some Buttons Not Green");
        }
    }

    // stop any further processing of the click
    return(false);
});

这里的工作示例：http://jsfiddle.net/jfriend00/Ctjxw/

仅供参考，我还必须删除有冲突的ID值并删除以数字开头的ID值。

Answer 2

我认为你现在正在过度思考这方面的表现方面。当您刚刚学习新技术时，最好的目标是实现清晰，可读的代码。如果性能成为问题，您可以稍后优化速度。你会更有经验，知道在那一点上要修复什么。：）

话虽如此，有些事情你很快就会学到的只是Good Ideas™：

如果您要重复运行项目列表，请执行一次选择，然后将结果列表分配给位于单击处理函数之外的变量。这样，每次单击处理程序执行时，您都不会重新运行选择。
最好避免在DOM中存储应用程序状态，即将自定义类应用于元素，以便稍后可以判断它们是否已被单击。我首先尝试将按钮映射到可以存储在变量中的值数组。在DOM中存储应用状态变得非常复杂。
如果您要在DOM中存储应用程序状态，我建议使用data-属性而不是应用自定义类。
如果您的应用程序变得复杂，那么学习像Backbone.js这样的JavaScript应用程序框架可能值得投资。当用户更改某些数据或执行操作时，这些框架处理许多更新显示的细节。不过，这里肯定有一个学习曲线。

Answer 3

最好的办法是让li存储类属性中每个状态的值。然后，当这些状态得到更新时，运行一个函数来检查每个不同状态的数字。

我已经在以下jsFiddle设置了一个工作演示。

我建议你的所有li开始时都有class="unknown"属性，这样你就可以跟踪尚未更新的状态。

<li id="1" class="unknown">

您的jQuery代码如下所示：

$(document).ready(function(){

    var CheckAllStates = function(){

        var unknownCount = $('ul#myList li.unknown').length;
        var greenCount = $('ul#myList li.green').length;
        var redCount = $('ul#myList li.red').length;
        var totalCount = unknownCount + greenCount + redCount ;

        if (unknownCount == 0)
        {
            if (greenCount == totalCount)
            {
                alert ('All greens');
            }
            else if (redCount >= 1)
            {
                alert('At least one red');    
            }
        }
    };

    $('ul#myList a.greenButton').click(function(){
        $(this).closest('li').attr('class', 'green');
        CheckAllStates();
    });

    $('ul#myList a.redButton').click(function(){
        $(this).closest('li').attr('class', 'red');
       CheckAllStates();
    });

    $('input#reset').click(function(){
        $('ul#myList li').attr('class', 'unknown');
    });
});

jquery触发某些项状态条件

3 个答案: