Question

为什么jQuery的这部分不能正常工作？

$(function() {

  if ($('#slide-01').is(":first-child")) {
    $('input:radio[id=target-slide-01]').prop('checked', true);
  } else {
    $('input:radio[id=target-slide-01]').prop('checked', false);
  }

  if ($('#slide-02').is(":first-child")) {
    $('input:radio[id=target-slide-02]').prop('checked', true);
  } else {
    $('input:radio[id=target-slide-02]').prop('checked', false);
  }

  if ($('#slide-03').is(":first-child")) {
    $('input:radio[id=target-slide-03]').prop('checked', true);
  } else {
    $('input:radio[id=target-slide-03]').prop('checked', false);
  }

  if ($('#slide-04').is(":first-child")) {
    $('input:radio[id=target-slide-04]').prop('checked', true);
  } else {
    $('input:radio[id=target-slide-04]').prop('checked', false);
  }

});

实施jQuery的链接位于jsFiddle。

当我检查HTML和CSS中的元素时，每个幻灯片最终都有'：first-child'（当幻灯片旋转时），但我的猜测是jQuery没有识别旋转或我的jQuery在某个地方。

我也尝试过使用：首先代替：第一个孩子，但它没有什么区别。

Answer 1

您的单选按钮功能只能在页面加载时调用一次，因为它是一个匿名自调用功能。如果你给出一个名字

function updateRadioButtons() {

    if ($('#slide-01').is(":first-child")) {
      $('input:radio[id=target-slide-01]').prop('checked', true);
    } else {
      $('input:radio[id=target-slide-01]').prop('checked', false);
    }

    if ($('#slide-02').is(":first-child")) {
      $('input:radio[id=target-slide-02]').prop('checked', true);
    } else {
      $('input:radio[id=target-slide-02]').prop('checked', false);
    }

    if ($('#slide-03').is(":first-child")) {
      $('input:radio[id=target-slide-03]').prop('checked', true);
    } else {
      $('input:radio[id=target-slide-03]').prop('checked', false);
    }

    if ($('#slide-04').is(":first-child")) {
      $('input:radio[id=target-slide-04]').prop('checked', true);
    } else {
      $('input:radio[id=target-slide-04]').prop('checked', false);
    }

  }

您可以在幻灯片更改后调用它

function moveLeft() {
    $('#myslider ul').animate({
        left: +containerWidth
    }, 600, function () {
        $('#myslider ul > li:last-child').insertBefore('#myslider ul > li:first-child');
        $(this).css('left', '');
        updateRadioButtons();
    });

}

function moveRight() {
    $('#myslider ul').animate({
        left: -containerWidth
    }, 600, function () {
      $('#myslider ul > li:first-child').insertAfter('#myslider ul > li:last-child');
      $(this).css('left', '');
        updateRadioButtons();
    });

}

以及页面加载

$(function() {

  // Key animation.

    updateRadioButtons();

  var myTimer = setInterval(function () {
    moveRight();
  }, 5000);

为什么：第一个孩子不工作？

1 个答案: