Question

这是动态创建的过滤器列表。单击“帐户”链接将打开一个模式窗口，其中包含帐户名称列表。单击帐户名称会导致li元素出现在过滤器侧栏中。问题是，您现在可以多次单击链接并创建一个元素，即使它是相同的信息。我需要它做的是每个帐户列表只创建一次li。我曾考虑使用not（）选择器，并在单击帐户名时在操作结束时添加一个类。问题是它们都共享同一类.account，这是JQuery在点击时执行操作的方式。我的问题首先是如何使这个工作，因为我的not（）行没有触发。其次，如何让它只针对用户点击的一个项目，而不是所有与帐户类别的链接？这是JSFiddle，但由于某些原因它不想工作，因为来自站点的Bootstrap有很多代码：http://jsfiddle.net/rsxavior/puhdE/7/

这是我所指的相关代码：

<li>
    <a href="#accountModal" data-toggle="modal">Accounts</a>
    <!--Start Account Sort Modal-->
    <div class="modal hide" id="accountModal" tabindex="-1" role="dialog" aria-labelledby="accountLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <hgroup>
                <h4 id="accountLabel">Accounts</h4>
                <h6>(Choose an account's first letter to quickly sort)</h6>
            </hgroup>
            <ul class="nav nav-pills">
                <li><a href="#">A</a></li>
                <li><a href="#">B</a></li>
                <li><a href="#">C</a></li>
                <li><a href="#">D</a></li>
                <li><a href="#">E</a></li>
                <li><a href="#">F</a></li>
                <li><a href="#">G</a></li>
                <li><a href="#">H</a></li>
                <li><a href="#">I</a></li>
                <li><a href="#">J</a></li>
                <li><a href="#">K</a></li>
                <li><a href="#">L</a></li>
                <li><a href="#">M</a></li>
                <li><a href="#">N</a></li>
                <li><a href="#">O</a></li>
                <li><a href="#">P</a></li>
                <li><a href="#">Q</a></li>
                <li><a href="#">R</a></li>
                <li><a href="#">S</a></li>
                <li><a href="#">T</a></li>
                <li><a href="#">U</a></li>
                <li><a href="#">V</a></li>
                <li><a href="#">W</a></li>
                <li><a href="#">X</a></li>
                <li><a href="#">Y</a></li>
                <li><a href="#">Z</a></li>
            </ul>
        </div>
        <div class="modal-body">
            <ul>
                <li class="account"><a href="#">All</a></li>
                <li class="account"><a href="#">A Name</a></li>
                <li class="account"><a href="#">Another Account Name</a></li>
                <li class="account"><a href="#">Babcock Center</a></li>
            </ul> 
        </div>
        <div class="modal-footer">
            <ul class="pager">
                <li><a href="#">Prev</a></li>
                <li><a href="#">Next</a></li>
            </ul>
        </div>
    </div>
    <ul class="account-hidden-li"></ul>
</li>

JQuery也随之而来：

$('.account:not('.selected-account')').click(function () {
    $('.account-hidden-li').append('<li class="account-select">Sample Account Name<a class="close" data-dismiss="alert" href="#">&times;</a></li>');
    $('.account').addClass('selected_account');
)};

非常感谢任何有关此事的帮助！

Answer 1

$(".account").click(function () {
this.unbind("click");
    $('.account-hidden-li').append('<li class="account-select">Sample Account Name<a class="close" data-dismiss="alert" href="#">&times;</a></li>');
    $('.account').addClass('selected_account');

}）;

如何使一个元素只能被点击一次而其他元素仍然可以点击一个动作？

1 个答案: