CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Mohamed Samy
Mohamed Samy

Reputation: 941

Bootstrap Modal element Select

i have bootstrap Modal . and i have 3 images on it . what i want that when i click on any of this images change HTML of div.text , but its change all the div that take .text class i need change the html of the current div that i opened the modal . any help !!

<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")  
 });

Upvotes: 0

Views: 1665

Answers (2)

matthias_h
matthias_h

Reputation: 11416

I just made a Bootply with following code:

$("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");
});

When a Modal link is clicked, it sets the class active to the link that opened the modal. When an image in the modal is clicked, the text that should be changed can be identified as it's the text next to the active link.
The only adjustment of your markup was to add some example content inside the anchor tag - <a data-toggle="modal" data-target="#myModal">Modal</a> instead of <a data-toggle="modal" data-target="#myModal"></a>, otherwise it wouldn't be possible (at least for this example) to open the modal.

Just in case - the bootply already wraps the code in a $(document).ready(), so the above code has to be wrapped in

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

in order to work.

Update: As mentioned as comment, above approach doesn't work for the original markup because there the div with the class text is not next to the link, but there are other divs between them.

I've adjusted this in another Bootply with following code change:

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

When the image is clicked, closest() selects the closest parent of the active link and find() selects the child element with the class text.
Depending on the actual markup it's also possible to select closest(".press") instead of closest(".Widget") (both will work for this example), it's only necessary to select a parent container of the link and the text.

Because Bootply was sometimes down when I made these changes, I've added this also in a Fiddle without bootstrap, just as example for the functionality.

For reference: http://api.jquery.com/closest/

Upvotes: 2

ninetiger
ninetiger

Reputation: 1116

can not see where $('#img1') in the code your provided. But I guess what you need is $(this), something like:

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

Upvotes: -1

Related Questions