Question

我是JavaScript和Jquery的新手，我在使用next和previous选项为多个下拉列表创建代码时遇到问题，但我不想为下一个和上一个选项编写两次相同的代码。我只是想动态地使用相同的代码。我试过但没有得到任何答案。 Plzz建议......

<div class="filter-category">
    <div class="floor-dropdown"> 
        <span class="prev">Prev</span>
        <select class="roof-filter">
            <option value="1" selected>All types</option>
            <option value="2">Type1</option>
            <option value="3">Type 2</option>
        </select> 
        <span class="next">Next</span>
    </div>
    <div class="floor-dropdown"> 
        <span class="prev">Prev</span>
        <select class="roof-filter">
            <option>011</option>
            <option>222</option>
            <option>333</option>
            <option>444</option>
        </select> 
        <span class="next">Next</span>
    </div>
</div>

jQuery(".roof-prev").click(function () {
    jQuery('.roof-filter option:selected').prev().attr('selected', 'selected');
});
jQuery(".roof-next").click(function () {
    jQuery('.roof-filter option:selected').next().attr('selected', 'selected');
});

请不要为第二个代码编写不同类名的代码，我想在不再写的情况下使用此代码。

提前致谢。

Answer 1

您可以使用this作为对单击元素的引用。从那里你可以通过找到最近的共同父母找到它所涉及的select。试试这个：

jQuery(function($) {
    $(".prev").click(function () {
        $(this).closest('.floor-dropdown').find('option:selected').prev().attr('selected', 'selected');
    });
    $(".next").click(function () {
        $(this).closest('.floor-dropdown').find('option:selected').next().attr('selected', 'selected');
    });
});

Example fiddle

在具有相同类的单个页面上的jquery中创建多个下一个和上一个按钮

1 个答案: