CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
Vinod
Vinod

Reputation: 2311

Issue with replace div in jQuery

I am using a navbar in my application. On click of navbar elements I need to change the images in the div. How can I get the div Id, so that I can replace respective div with another div?

     <div data-role="navbar">
        <ul>
            <li><a id="test1" href="#">Test1</a></li>
            <li><a id="test2" href="#">Test2</a></li>
            <li><a id="test3" href="#">Test3</a></li>
            <li><a id="test4" href="#">Test4</a></li>

        </ul>
    </div>


      <div id= "SelectedData"> I need to replace this div on click event.</div>

Different images for respective click 

        <div id="replaceData" style="width: 100%;">
          <img src="img/test1.jpg" alt="" style="width: 100% !important; height:15% !important">
         </div>
<div id="replaceData1" style="width: 100%;">
          <img src="img/test2.jpg" alt="" style="width: 100% !important; height:15% !important">
         </div>
<div id="replaceData2" style="width: 100%;">
          <img src="img/test3.jpg" alt="" style="width: 100% !important; height:15% !important">
         </div>
<div id="replaceData3" style="width: 100%;">
          <img src="img/test4.jpg" alt="" style="width: 100% !important; height:15% !important">
         </div>

Script Code:

$('div[data-role="navbar"] ul li a#test1').on('click', function () {
             $('#replaceData').replaceWith($('#replaceData1').html());
         }); 
         $('div[data-role="navbar"] ul li a#test2').on('click', function () {
             $('#replaceData').replaceWith($('#replaceData2').html());
         });
$('div[data-role="navbar"] ul li a#test3').on('click', function () {
             $('#replaceData').replaceWith($('#replaceData3').html());
         }); 
         $('div[data-role="navbar"] ul li a#test4').on('click', function () {
             $('#replaceData').replaceWith($('#replaceData4').html());
         });

How do I get the selected div Id, So that I will that div.

Upvotes: 0

Views: 92

Answers (2)

CunningFatalist
CunningFatalist

Reputation: 473

"How do I get the selected div Id, So that I will that div."

I am not quite sure if that is what you are asking for, but, well, here you go:

$(document).on('click', '.some-class', function(){
  console.log( $(this).attr('id') );
});

As you can see, I made some changes. Firstly, I am selecting $(document) and add the selector as a parameter. In this way, you can count on the .on() method to catch dynamically generated elements, too. Then, within the function, I am logging the ID of $(this) (the object returned by jQuery after you have passed this). Of course, you could now store that value:

$(document).on('click', '.some-class', function(){
  var id = $(this).attr('id');
});

PS:

Remember that you can select IDs directly. They are unique, no need to be too specific. Unless you want to speed things up with .find():

$(document).on('click', '#test1', function(){
  // your clever code!
});

It's way cleaner to read and not as painful to write as $('div[data-role="navbar"] ul li a#test1') :)

Hopefully, that's what you wanted to know. Cheers!

Upvotes: 0

Robert Messerle
Robert Messerle

Reputation: 3032

It looks like what you want to do is swap out the HTML inside the DIV, rather than replace the DIV itself. Try this:

$('div[data-role="navbar"] ul li a#test1').on('click', function () {
  $('#replaceData').html($('#replaceData1').html());
}); 
$('div[data-role="navbar"] ul li a#test2').on('click', function () {
  $('#replaceData').html($('#replaceData2').html());
});
$('div[data-role="navbar"] ul li a#test3').on('click', function () {
  $('#replaceData').html($('#replaceData3').html());
}); 
$('div[data-role="navbar"] ul li a#test4').on('click', function () {
  $('#replaceData').html($('#replaceData4').html());
});

Upvotes: 2

Related Questions