javascript - 在 jQuery 中替换 div 的问题

Question

我在我的应用程序中使用导航栏。单击导航栏元素时，我需要更改 div 中的图像。如何获取 div Id，以便我可以用另一个 div 替换相应的 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>

不同的点击图片

        <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>

脚本代码:

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

如何获取选定的 div Id，以便我将那个 div。

Answer 1

看起来您想要做的是换出 DIV 中的 HTML，而不是替换 DIV 本身。试试这个:

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