Bootstrap 模态元素 Select

Question

我有 bootstrap 模态。我上面有 3 张图片。我想要的是，当我单击任何此图像时更改 div.text 的 HTML，但它会更改所有需要 .text class 的 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

在您提供的代码中看不到 $('#img1') 的位置。但我猜你需要的是 $(this)，比如：

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

Answer 2

我刚刚用下面的代码做了一个 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 link 时，它会将 class active 设置为打开模式的 link。单击模式中的图像时，可以识别应该更改的 text，因为它是活动 link.
旁边的文本对标记的唯一调整是在锚标记内添加一些示例内容 - <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
});

为了工作。

更新： 如评论所述，上述方法不适用于原始标记，因为 div 和 class text 不在 link 旁边，但它们之间还有其他 div。

我在另一个 Bootply 中通过以下代码更改对此进行了调整：

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

单击图像时，closest() select 是活动 link 最近的父元素， find() select 是具有class text.
根据实际标记，也可以 select closest(".press") 而不是 closest(".Widget") （两者都适用于此示例），只需要 select link 和 text。

因为当我进行这些更改时 Bootply 有时会关闭，所以我也在没有 bootstrap 的 Fiddle 中添加了它，作为功能示例。

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

Bootstrap 模态元素 Select

Bootstrap Modal element Select

javascript

jquery

twitter-bootstrap