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

为什么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没有关闭。

我也试过使用：第一位代替：第一个孩子，但它没有区别。

来源

2014-10-27 Andrew

我不知道jQuery的，但如果你是将开始与具有四张幻灯片的标记，然后幻灯片三从逻辑上不会成为第一个孩子，不是？ – TylerH 2014-10-27 13:33:14

一旦DOM准备好了，你就可以调用这个函数，但是再也不要......然后第一个孩子总是slide-01。每次更换幻灯片时都需要调用该函数。 – DaniP 2014-10-27 13:35:04

@Danko：您应该将其添加为答案:) – LinkinTED 2014-10-27 13:39:17

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

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

来源

2014-10-27 13:56:02 Markai

谢谢！完美解决问题。 – Andrew 2014-10-27 14:01:08

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

回答

相关问题