0

这是一个动态创建的过滤器列表。单击帐户链接将打开一个模式窗口，其中包含帐户名称列表。单击帐户名称会导致 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');
)};

在这件事上的任何帮助将不胜感激！

4

1 回答 1

2 
$(".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');

});

于 2012-09-17T13:34:22.493 回答