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

create multiple next and previous button in jquery on single page with same class

本文关键字：创建 next 按钮 previous jquery 同类 单个页      更新时间：2023-09-26

我是JavaScript和Jquery的新手，在创建带有next和previous选项的多个下拉列表的代码时遇到了问题，但我不想为next和previor编写两次相同的代码。我只是想动态地使用相同的代码。我试过了，但没有得到任何答复。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');
});

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

提前谢谢。

您可以使用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');
    });
});

小提琴示例

相关文章：