Question

我有一个光滑的滑块，想要知道如何通过next和prev按钮更改单选按钮，我不擅长js或jquery，如果你能帮助我，我会非常高兴:(

            <section class="center slider">
            <div class="type">
            <label><input type="radio" name="type" value="1" checked /><img src="./images/1.png"></label>
            </div>
            <div  class="type">
            <label><input type="radio" name="type" value="2" /><img src="./images/2.png"></label>
            </div>
            <div  class="type">
            <label><input type="radio" name="type" value="3" /><img src="./images/3.png"></label>
            </div>
            <div  class="type">
            <label><input type="radio" name="type" value="4" /><img src="./images/4.png"></label>
            </div>
            <div  class="type">
            <label><input type="radio" name="type" value="5" /><img src="./images/5.png"></label>
            </div>
            <div  class="type">
            <label> <input type="radio" name="type" value="6"/><img src="./images/6.png"></label>
            </div>
            <div  class="type">
            <label><input type="radio" name="type" value="7" /><img src="./images/7.png"></label>
            </div>
        </section>

        <button type="button" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>

        <button type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>

我试图使用一些js：

<button type="button" onclick="dayNavigation('prev');"data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>

<button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>

dayNavigation = function (direction) {
    var all = $('.slider input:radio');
    var current = $('.slider input:radio:checked');
    var index;
    if (direction == 'slick-prev') {
        index = all.index(current) - 1;       
    } else {
        index = all.index(current) + 1;        
    }

    if(index >= all.size()) index = 0;
    all.eq(index).click();
    return false;
};

Answer 1

您可以使用JQuery中的eq()函数和.prop()函数来实现此目的。

这是工作小提琴：http://jsfiddle.net/jPfXS/111/

<button type="button" onclick="dayNavigation('prev');"data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>

<button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>

var index = 0;
dayNavigation = function (direction) {
    var curr = $('.slider input[name="type"]:checked');
    console.log(curr);
    if(direction == 'next'){
        if(index > 0){
            $('input[name="type"]').eq(index-1).prop("checked", true);
            curr.prop("checked", false);
            index--;
        }
    }
    else{
        if(index < $('input[name="type"]').length - 1){
            $('input[name="type"]').eq(index+1).prop("checked", true);
            curr.prop("checked", false);
            index++;
        }
    }
};

如何通过下一个prev更改单选按钮

1 个答案: