Question

我有bootstrap Modal。我有3张图片。我想要的是当我点击任何这个图像改变div.text的HTML，但它改变所有采用.text类的div我需要更改我打开模态的当前div的html。任何帮助!!

<div class="Widget">
 <div class="press">
    <a data-toggle="modal" data-target="#myModal"></a>
     <div class="text">test111</div>
 </div>
</div>

<div class="Widget">
 <div class="press">
    <a data-toggle="modal" data-target="#myModal"></a>
      <div class="text">test2222</div>
 </div>
</div>

<div class="Widget">
 <div class="press">
    <a data-toggle="modal" data-target="#myModal"></a>
    <div class="text">test3333</div>
 </div>
</div>

Jquery：

$("#img1").click(function(){
  $(".text").html("Its woking")  
 });

Answer 1

我刚刚使用以下代码制作了Bootply：

$("a[data-toggle='modal']").click(function(){
  $("a[data-toggle='modal']").removeClass("active");
  $(this).addClass("active");
});
$("#myModal img").click(function(){
  $("a.active").next(".text").html("Its working");
});

单击Modal链接时，会将类active设置为打开模式的链接。单击模态中的图像时，可以识别应更改的text，因为它是活动链接旁边的文本。
标记的唯一调整是在锚标记内添加一些示例内容 - <a data-toggle="modal" data-target="#myModal">Modal</a>而不是<a data-toggle="modal" data-target="#myModal"></a>，否则就不可能（至少在此示例中）打开模式。

以防万一 - bootply已将代码包装在$(document).ready()中，因此上述代码必须包含在

中

$(document).ready(function() {
// above code here
});

为了工作。

更新：正如评论所述，上述方法对原始标记不起作用，因为类text的div不在链接旁边，但在那里是他们之间的其他div。

我已在另一个Bootply中对此进行了调整，但代码更改如下：

$("#myModal img").click(function(){
  $("a.active").closest(".Widget").find(".text").html("Its working");
});

单击图像后，closest()会选择最近的活动链接父级，find()会选择类text的子元素。
根据实际标记，还可以选择closest(".press")而不是closest(".Widget")（两者都适用于此示例），只需选择链接的父容器和text。

因为当我进行这些更改时，Bootply有时会失败，所以我也在没有引导程序的Fiddle中添加了它，就像功能的例子一样。

供参考：http://api.jquery.com/closest/

Answer 2

无法在您提供的代码中看到$（'＃img1'）的位置。但我猜你需要的是$（这个），比如：

$('.imgs').click(function(){
   $(this).html()....
});

Bootstrap模态元素选择

2 个答案: