javascript - 如何更新单选按钮的状态以匹配轮播状态？

Question

我将单选按钮用作轮播的分页，效果很好。如果我使用旋转木马按钮而不是单选按钮更改幻灯片，则单选按钮的状态不会改变，因此所选按钮与所选幻灯片不匹配。我该如何解决这个问题？

Here is my template

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);});
});

Answer 1

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

$('#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);});
});

不是个好主意。我建议更改它并使其像 this