Question

我使用featherlight.js在点击某些链接时创建模态弹出窗口。我有几个同类链接，在一系列div中，每个链接都弹出一个模式显示不同的图片和标题。图片正确地弹出模态。我试图添加一些jquery：检索并找到刚刚单击的锚元素的前一个兄弟div，并将该div的html div插入模式弹出窗口中的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>

我想得到id =＆＃34; mdc＆＃34;的html（内容）在这个特定的div里面，并使用class =＆＃34; modal-caption＆＃34;将这些内容插入到div中。我需要在这个特定的父母中找到div，因为我有几个div，其中class =＆＃34; timeline-box-inner＆＃34;需要提取字幕并将其添加为模态中的标题。

仅供参考，这对我不起作用，它将返回：[object Object]

Answer 1

以下片段应该做你想要的。

$('.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>

Answer 2

您可以在[11, 22, 3]。

中使用此功能

<head></head>

得到兄弟div的元素只需点击并插入div jquery返回[object Object]

2 个答案: