得到兄弟元素只是單擊並插入到div jquery返回[對象對象]

我使用featherlight.js來創建模式彈出窗口，當點擊一些鏈接。我有幾個相同的課程鏈接，在一系列div中，每個鏈接都會彈出一個顯示不同圖片和標題的模式。圖片正確彈出模式。我試圖添加一些jquery：檢索並找到剛纔單擊的錨元素的前一個兄弟div，並將該div的html div插入模式彈出窗口中的div（圖像標題）。這是我的jQuery：得到兄弟元素只是單擊並插入到div jquery返回[對象對象]

"<div class='modal-caption'>" + jQuery("#modalTrigger").click(function(){ 
var caption = jQuery(this).prev("div"); 
var partcap = caption.html(); 
return partcap; }) 

,"</div>"

這是HTML：

<div class="timeline-box-inner animate-right animated"> 
<span class="arrow"></span> 
<div class="date">1974 - 1976</div> 
    <h3>High School</h3> 
    <h4> 
    <a href="http://whs.westside66.org/"> 
    Westside</a> 
    </h4> 

    <div id="mdc" class="display-none-caption">Just A Test</div> 
    <a id="modalTrigger" class="education-modal-link" href="http://johnhoich.com/wp-content/uploads/2015/11/logo-compass-1.png" data-featherlight="image"></a>

我想這個特殊的div裏面的id = 「MDC」的HTML（內容）並將前綴/返回/將該內容插入到class =「modal-caption」的div中。我需要找到這個特定的父母內的div，因爲我有幾個div的類=「timeline-box-inner」，其中的標題需要被拉和添加爲模式中的標題。

FYI這不是爲我工作，它返回爲：對象對象]

來源

2017-01-15 Mike

下面的片段應該做你想要什麼。

$('.education-modal-link').on('click', function(e) { 
 
    // prevent the default <a href> click behaviour 
 
    e.preventDefault(); 
 
    // get the text from the sibling <div> 
 
    var text = $(this).prev('div').text(); 
 
    // find the first div with a 'modal-caption' class 
 
    // and add the text 
 
    $('div.modal-caption').eq(0).html(text); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="date">1974 - 1976</div> 
 
<h3>High School</h3> 
 
<h4><a href="http://blah.org/">Westside</a></h4> 
 
<div class="display-none-caption">Just A Test 1</div> 
 
<a class="education-modal-link" href="http://johnhoich.com/wp-content/uploads/2015/11/logo-compass-1.png" data-featherlight="image">click me</a> 
 
<div class="display-none-caption">Just A Test 2</div> 
 
<a class="education-modal-link" href="http://johnhoich.com/wp-content/uploads/2015/11/logo-compass-1.png" data-featherlight="image">click me</a> 
 
<div class="display-none-caption">Just A Test 3</div> 
 
<a class="education-modal-link" href="http://johnhoich.com/wp-content/uploads/2015/11/logo-compass-1.png" data-featherlight="image">click me</a> 
 
<div class='modal-caption'>I'm going to change!</div>

來源

2017-01-15 02:04:34

我更接近 - 但沒有骰子！當我第一次點擊它時，這不起作用，但是如果我再次單擊它，它就會起作用。我必須在同一頁面上多次重複這個動作 - 我有幾個鏈接應該彈出每個模式彈出的不同標題 - 對我來說，只有第一個鏈接有效（如果我點擊它兩次）。並且所有其他鏈接不起作用 – Mike

事件處理程序需要附加到「education-modal-link」類而不是id。我更新了代碼片段來演示。 –

神聖莫里 - 杜！謝謝 - 但一件事：它不起作用的第一次點擊。點擊其中一個鏈接後，所有人都開始工作。爲什麼是這樣？ – Mike

可以在<head></head>使用。

<script> jQuery(document).ready(function(){ $("#modalTrigger").click(function(){ $(".modal-caption").html($(this).prev("#mdc").html()); }); }); </script>

來源

2017-01-15 02:08:39 volvox

不行 - 想看網頁？ – Mike

得到兄弟元素只是單擊並插入到div jquery返回[對象對象]

回答

相關問題