选择当前选择框

Question

我创建了一个带有选择框和 div 按钮的基本定价计算器。问题是，当我点击按钮时，它选择了我代码中的所有选择框。我只需要指定一个，我最近点击的地方。

$(".prev").click(function() {
    $('.val option:selected').prev().attr('selected', 'selected');
});

$(".next").click(function() {
    $('.val option:selected').next().attr('selected', 'selected');
});

.prev, .next {
    width: 20px;
    height: 20px;
    background-color: #6c6c6c;
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="calc">
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>1</option>
                <option>2</option>
                <option>4</option>
                <option>6</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>2</option>
                <option>4</option>
                <option>8</option>
                <option>16</option>
                <option>32</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>0</option>
                <option>50</option>
                <option>100</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>0</option>
                <option>50</option>
                <option>100</option>
                <option>200</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>0</option>
                <option>200</option>
                <option>500</option>
                <option>1000</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>Linux</option>
                <option>Windows</option>
            </select>
            <div class="next"></div>
        </div>
    </div>

Answer 1

我觉得你可以用 this

$(".prev").click(function() {
  $(this).find(".val option:selected").prev().attr('selected', 'selected');
});

Answer 2

使用$(this)获得点击<div>。
使用.siblings('select')或.siblings('.val')得到select。
使用 .find('option:selected').next()/.prev() 获取 next/prev 选项 selected。
用.prop('selected', true)到select吧。

$(".prev").click(function() {
  $(this).siblings('select').find('option:selected').prev().prop('selected', true);
});

$(".next").click(function() {
    $(this).siblings('select').find('option:selected').next().prop('selected', true);
});

.prev, .next {
    width: 20px;
    height: 20px;
    background-color: #6c6c6c;
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="calc">
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>1</option>
                <option>2</option>
                <option>4</option>
                <option>6</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>2</option>
                <option>4</option>
                <option>8</option>
                <option>16</option>
                <option>32</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>0</option>
                <option>50</option>
                <option>100</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>0</option>
                <option>50</option>
                <option>100</option>
                <option>200</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>0</option>
                <option>200</option>
                <option>500</option>
                <option>1000</option>
            </select>
            <div class="next"></div>
        </div>
        <div class="selector">
            <div class="prev"></div>
            <select class="val">
                <option selected>Linux</option>
                <option>Windows</option>
            </select>
            <div class="next"></div>
        </div>
    </div>

选择当前选择框

Selecting current selectbox

javascript

jquery

this