使用JQuery選擇第二個元素

Question

我在JQuery中選擇元素時遇到了問題。 我需要的是當我在時間軸上的面板上懸停時對日期有影響。但只能選擇面板的日期。

$(function() { 
 
    "use strict"; 
 
    $('.timeline li .timeline-panel').on("mouseenter", function() { 
 
    $(this).prev(".tl-circ").css({ 
 
     'background': '#000' 
 

 
    }); 
 
    }); 
 
    $('.timeline li .timeline-panel').on("mouseleave", function() { 
 
    $(this).prev(".tl-circ").css({ 
 
     'background': '#fff' 
 
    }); 
 
    }); 
 

 
    $('.timeline li .timeline-panel').on("mouseenter", function() { 
 
    $(this).prev(".tldate").css({ 
 
     'background': '#000' 
 

 
    }); 
 
    }); 
 
    $('.timeline li .timeline-panel').on("mouseleave", function() { 
 
    $(this).prev(".tldate").css({ 
 
     'background': '#fff' 
 
    }); 
 
    }); 
 
});

.timeline-panel { 
 
    background-color: #FFF; 
 
} 
 
.timeline li .tl-circ { 
 
    position: absolute; 
 
    top: 23px; 
 
    left: 50%; 
 
    text-align: center; 
 
    background: #fff; 
 
    color: #fff; 
 
    width: 35px; 
 
    height: 35px; 
 
    line-height: 35px; 
 
    margin-left: -16px; 
 
    border: 3px solid #90acc7; 
 
    border-top-right-radius: 50%; 
 
    border-top-left-radius: 50%; 
 
    border-bottom-right-radius: 50%; 
 
    border-bottom-left-radius: 50%; 
 
    z-index: 1000; 
 
    -webkit-transition: all .27s ease-in-out; 
 
    transition: all .27s ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="timeline"> 
 
    <li> 
 
    <div class="tldate"> 
 
     <div class="movement"></div>JAN 2008 - DEC 2012</div> 
 
    </li> 
 
    <li> 
 
    <div class="tl-circ"></div> 
 
    <div class="timeline-panel"> 
 
     <div class="tl-heading"> 
 
     <h4>UNIVERSITY OF ENGINEERING</h4> 
 
     <p><small class="text-muted">Bachelor of Science</small> 
 
     </p> 
 
     </div> 
 
     <div class="tl-body"> 
 
     <p>Completed graduation from University of Engineering with the major of Computer Science &amp; Engineering. Achieved the Dean Award for extra-ordinary result.</p> 
 
     </div> 
 
    </div> 
 
    </li> 
 
</ul>

如您在此代碼段看到，當你將鼠標懸停在應用上一圈的時間線面板色彩效果。 但我還需要在之前的日期中生效。 我嘗試了很多東西，但我沒有得到它。 請記住，我有多個時間軸面板。我只想在當前面板的前一天應用效果。 預先感謝您。

Answer 1

使用$(this).closest('li').prev().find(".tldate")訪問對應於timeline-panel的tldate。

請參見下面的演示：

$(function() { 
 
    "use strict"; 
 
    $('.timeline li .timeline-panel').on("mouseenter", function() { 
 
    $(this).prev(".tl-circ").css({ 
 
     'background': '#000' 
 

 
    }); 
 
    $(this).closest('li').prev().find(".tldate").css({ 
 
     'background': '#000' 
 

 
    }); 
 
    }); 
 
    $('.timeline li .timeline-panel').on("mouseleave", function() { 
 
    $(this).prev(".tl-circ").css({ 
 
     'background': '#fff' 
 
    }); 
 
    $(this).closest('li').prev().find(".tldate").css({ 
 
     'background': '#fff' 
 
    }); 
 
    }); 
 

 

 
});

.timeline-panel { 
 
    background-color: #FFF; 
 
} 
 
.timeline li .tl-circ { 
 
    position: absolute; 
 
    top: 23px; 
 
    left: 50%; 
 
    text-align: center; 
 
    background: #fff; 
 
    color: #fff; 
 
    width: 35px; 
 
    height: 35px; 
 
    line-height: 35px; 
 
    margin-left: -16px; 
 
    border: 3px solid #90acc7; 
 
    border-top-right-radius: 50%; 
 
    border-top-left-radius: 50%; 
 
    border-bottom-right-radius: 50%; 
 
    border-bottom-left-radius: 50%; 
 
    z-index: 1000; 
 
    -webkit-transition: all .27s ease-in-out; 
 
    transition: all .27s ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="timeline"> 
 
    <li> 
 
    <div class="tldate"> 
 
     <div class="movement"></div>JAN 2008 - DEC 2012</div> 
 
    </li> 
 
    <li> 
 
    <div class="tl-circ"></div> 
 
    <div class="timeline-panel"> 
 
     <div class="tl-heading"> 
 
     <h4>UNIVERSITY OF ENGINEERING</h4> 
 
     <p><small class="text-muted">Bachelor of Science</small> 
 
     </p> 
 
     </div> 
 
     <div class="tl-body"> 
 
     <p>Completed graduation from University of Engineering with the major of Computer Science &amp; Engineering. Achieved the Dean Award for extra-ordinary result.</p> 
 
     </div> 
 
    </div> 
 
    </li> 
 
</ul>