如何更新单选按钮的状态以匹配转盘状态

How can I update the state of radio buttons to match carousel status?

本文关键字：状态 单选按钮 何更新 更新      更新时间：2023-09-26

我使用单选按钮，就像旋转木马的分页一样，效果很好。如果我使用转盘按钮而不是单选按钮更改幻灯片，则单选按钮的状态不会更改，因此所选按钮与所选幻灯片不匹配。我该怎么解决这个问题？

这是我的模板

HTML:

<div class="container">
    <div id="carousel" class="carousel slide" data-interval="false" data-ride="carousel">
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="img-responsive center-block" src="http://www.w3schools.com/bootstrap/img_chania.jpg">
        </div>
        <div class="item">
          <img class="img-responsive center-block" src="http://www.w3schools.com/bootstrap/img_chania2.jpg">
        </div>
        <div class="item">
          <img class="img-responsive center-block" src="http://www.w3schools.com/bootstrap/img_flower.jpg">
        </div>
        <div class="item">
          <img class="img-responsive center-block" src="http://www.w3schools.com/bootstrap/img_flower2.jpg">
        </div>
      </div>
      <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
  <br>
  <center>
    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary active s1"><input type="radio" name="options" autocomplete="off" checked>1</label>
      <label class="btn btn-primary s2"><input type="radio" name="options" autocomplete="off">2</label>
      <label class="btn btn-primary s3"><input type="radio" name="options" autocomplete="off">3</label>
      <label class="btn btn-primary s4"><input type="radio" name="options" autocomplete="off">4</label>
    </div>
  </center>

JS:

$(function () {
    $(".s1").click(function () {$("#carousel").carousel(0);});
    $(".s2").click(function () {$("#carousel").carousel(1);});
    $(".s3").click(function () {$("#carousel").carousel(2);});
    $(".s4").click(function () {$("#carousel").carousel(3);});
});

如果你想保持原样，你可以添加

$('#carousel').on('slide.bs.carousel', function (e) {
    var idx = $(e.relatedTarget).index() + 1;
    $('.s'+idx).button('toggle');
});

但是

$(function () {
    $(".s1").click(function () {$("#carousel").carousel(0);});
    $(".s2").click(function () {$("#carousel").carousel(1);});
    $(".s3").click(function () {$("#carousel").carousel(2);});
    $(".s4").click(function () {$("#carousel").carousel(3);});
});

不是那个好主意。我建议更改它，使其像一样

我已经解决了这个问题）

这里有一个固定的JS：

$(document).ready(function() {
  $('#carousel').on('slide.bs.carousel', function(e) {
    var idx = $(e.relatedTarget).index();
    $('[data-slide-to=' + idx + ']').button('toggle');
  });
});

这是工作模板

相关文章：