jQuery 单选按钮事件答案

【问题标题】：jQuery radio button eventsjQuery 单选按钮事件
【发布时间】：2019-04-29 06:18:53
【问题描述】：

我刚开始学习 jQuery。我做了一个简单的滑块，当我单击它们时，我无法弄清楚如何正确地将事件放在单选按钮上，我的 ul 会在“-1*width_of_single_slide*radio_btn_value”上向左移动边距。这意味着当我单击第一个单选按钮（值 = 0 的单选按钮）时，列表将显示第一张幻灯片，依此类推。或者是否有一种简单的方法可以在不为每个单选按钮赋值的情况下实现它？

HTML：

<body>
<div id="slider">
    <ul class="slides">
        <li class="slide"><img src="../img/bg1.jpg"></li>
        <li class="slide"><img src="../img/bg2.jpg"></li>
        <li class="slide"><img src="../img/bg3.jpg"></li>
        <li class="slide"><img src="../img/bg4.png"></li>
        <li class="slide"><img src="../img/bg5.jpg"></li>
        <li class="slide"><img src="../img/bg6.jpg"></li>
        <li class="slide"><img src="../img/bg7.jpg"></li>
        <li class="slide"><img src="../img/bg8.jpg"></li>
        <li class="slide"><img src="../img/bg9.png"></li>
        <li class="slide"><img src="../img/bg1.jpg"></li>
    </ul>
</div>
<form action="" id="pointers">
    <input type="button" id="left" value="Left">
    <input type="button" id="right" value="Right"> </form>
<div action="" id="lowerBar">
    <form action="" class="stop">
        <input type="button" value="pause" id="pause"> </form>
    <form action="" id="choices">
        <input type="radio" name="changeBg" value="0">
        <input type="radio" name="changeBg" value="1">
        <input type="radio" name="changeBg" value="2">
        <input type="radio" name="changeBg" value="3">
        <input type="radio" name="changeBg" value="4">
        <input type="radio" name="changeBg" value="5">
        <input type="radio" name="changeBg" value="6">
        <input type="radio" name="changeBg" value="7">
        <input type="radio" name="changeBg" value="8"> </form>
    <form action="" style="width: 40px"></form>
</div>
<script src="script.js"></script>

JavaScript：

$(function () {
let width = 720;
let animationSpeed = 1000;
let pause = 3000;
let currentSlide = 1;
let $slider = $('#slider');
let $slideContainer = $slider.find('.slides');
let $slides = $slideContainer.find('.slide')
let interval;

function startSlider() {
    interval = setInterval(function () {
        $slideContainer.animate({
            'margin-left': '-=' + width
        }, animationSpeed, function () {
            currentSlide++;
            if (currentSlide == $slides.length) {
                currentSlide = 1;
                $slideContainer.css('margin-left', 0);
            }
        });
    }, pause);
}

function pauseSlider() {
    clearInterval(interval);
}
$('#pause').click(pauseSlider);
$('#left').click(function () {
    $slideContainer.animate({
        'margin-left': '+=' + width
    }, animationSpeed);
});
$('#right').click(function () {
    $slideContainer.animate({
        'margin-left': '-=' + width
    }, animationSpeed);
});
console.log($('input[type="radio"]'));

    for(let i =0; i<$('input[type="radio"]').length;i++) {
        $('input[type="radio"]')[i].click(function(){
            $slideContainer.animate({'margin-left': '='+width},animationSpeed);
        })
    }

$('input[type="radio"]').change(function () {
    if ($('input[type="radio"]').prop("checked", true)) {
        $slideContainer.animate({'margin-left': '-'+width*$('input[type="radio"]').val()},animationSpeed);
    }
});
startSlider();

})

【问题讨论】：

您在哪里使用无线电值？您正在使用它的索引，这很好。此外，您应该在某些变量上使用const。那些你不改变他们的价值观的人。例如：let width = 720; let animationSpeed = 1000; let pause = 3000;
我不知道如何在这里使用索引，所以我使用了值，我之前尝试使用'for'循环通过索引将事件放在每个单选按钮上，但它不起作用.
检查下面的答案让我知道它是否有帮助

标签： javascript jquery html

【解决方案1】：

您可以找到单击的单选按钮的索引，并将其用于$(input).index(this)的计算中

在此处阅读有关索引的更多信息 -> jquery index() 是对 get() 方法的补充。接受一个元素并返回它相对于它的兄弟元素的索引。

见下文

const input = $('input[type="radio"]')
const slideContainer = $('.slide-container');

$(input).change(function() {
  if ($(this).prop("checked", true)) {
    const inputIndex = $(input).index(this)
    $(slideContainer).animate({
        'margin-left': '-' + 10 * inputIndex
      },
      1000)
  }
});

main {
padding:0 50px;
}
.slide-container {
height:100px;
width:100px;
background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <div class="slide-container">
  </div>
  <div class="input-container">
    <input type="radio" name="changeBg">
    <input type="radio" name="changeBg">
    <input type="radio" name="changeBg">
    <input type="radio" name="changeBg">
  </div>
</main>

此外，如果您想找到与单击的单选按钮相对应的幻灯片项目，您可以使用（也在 change 函数中）

$(slideContainer).find('.slide-item ').eq(inputIndex) 并用它做点什么。

详细了解eq() -> jQuery eq() 以及eq() 和get() 之间的区别 -> jquery-eq-vs-get

【讨论】：