Question

我已经制作了jQuery代码，当点击并删除其他代码时，它是addclass。

$('.list_qna li a').on('click', function (e) {
    $(this).parent('li').addClass('selected').siblings('.selected').removeClass('selected');
    e.preventDefault();
});

$('.list_box li a').on('click', function (e) {
    $(this).parent('li').addClass('selected').siblings('.selected').removeClass('selected');
    e.preventDefault();
});

$('.list_contact li a').on('click', function (e) {
    $(this).parent('li').addClass('selected').siblings('.selected').removeClass('selected');
    e.preventDefault();
});




<ul class="list_qna">
    <li>
        <a href="#">list</a>
    </li>
    <li>
        <a href="#">list</a>
    </li>
</ul>

<ul class="list_box ">
    <li>
        <a href="#">list</a>
    </li>
    <li>
        <a href="#">list</a>
    </li>
</ul>

<ul class="list_contact ">
    <li>
        <a href="#">list</a>
    </li>
    <li>
        <a href="#">list</a>
    </li>
</ul>

有没有办法让代码对于不同的元素更简单？请帮忙。

*使用HTML结构更新

Answer 1

如果您希望所有列表都具有相同的行为，那么最好在所有列表上使用相同的类。这是一个例子：

$('.list_selection li a').on('click', function(e) {
	e.preventDefault();
	$(this).parent('li').addClass('selected').siblings('.selected').removeClass('selected');
});

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.list_selection {
    list-style: none;
    overflow: hidden;
}
.list_selection li {
    width: 30%;
    float: left;
    margin: 5px;
    border: 1px solid black;
}
.list_selection a {
    display: block;
    background: none red;
    cursor: pointer;
    text-align: center;
}
.list_selection .selected a {
    background: none yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list_qna list_selection">
    <li>List qna 1<a>select</a></li>
    <li>List qna 2<a>select</a></li>
    <li>List qna 3<a>select</a></li>
</ul>
<ul class="list_box list_selection">
    <li>List box 1<a>select</a></li>
    <li>List box 2<a>select</a></li>
    <li>List box 3<a>select</a></li>
</ul>
<ul class="list_contact list_selection">
    <li>List contact 1<a>select</a></li>
    <li>List contact 2<a>select</a></li>
    <li>List contact 3<a>select</a></li>
</ul>

同样在JSFiddle。

我的情况是你不能或不想添加这个类，你可以这样使用jQuery Multiple Selector（读取：逗号分隔的选择器）：

$('.list_qna li a, .list_box li a, .list_contact li a').on('click', function(e) {
    e.preventDefault();
    $(this).parent('li').addClass('selected').siblings('.selected').removeClass('selected');
});

选择所有指定选择器的组合结果。

有何方法使代码更简单？

1 个答案: