jquery - 如何使用 JQuery 更新另一个元素的内容

Question

好的，我有一个大约 5 个链接的列表，一个接一个。当我将鼠标悬停在这些链接之一上时，我需要扩大它的大小(以将其与其他链接区分开来)。当我单击这些链接之一时，我希望它更新不同元素中的图像。我已经弄清楚如何使用 JQuery 和 CSS 对单个链接执行此操作，但我想知道是否需要创建 4 个额外的(对于其他 4 个链接)JQuery 函数集，或者是否有一种方法可以通过以下方式节省代码空间:使用带有某种计数器的 for 循环。 我的逻辑问题(仅使用一个无所不包的功能)源于这样一个事实:我不知道如何区分悬停在链接上的链接。这让我觉得每个链接都需要一组不同的函数。真诚感谢任何和所有建议。

这是我的 HTML 代码:

  <div class="interestsMarquee">

  <img src="sportsInterest.png" class="trigger" id="interest1" alt="sports" />
  <img src="sportsInterest.png" class="trigger" id="interest2" alt="music"  />
  <img src="sportsInterest.png" class="trigger" id="interest3" alt="hunting" />
  <img src="sportsInterest.png" class="trigger" id="interest4" alt="exercise" />
  <img src="sportsInterest.png" class="trigger" id="interest5" alt="shopping" />
  </div>

这是我的 JQuery 代码:

    <script>
    $(function() {
var i = '1';

    $("#interest"+i).hover(function()
   {
     $("#interest"+i).css("width","115%")
               .css("height","70px")
               .css("margin-left","-10px");
    },function()
{
    $("#interest"+i).css("width","95%")
               .css("height","56px")
               .css("margin-left","3px");
        }); 

     $('.trigger').css('cursor', 'pointer')
         .click({id: 'myImage'}, changeImage);

function changeImage(e)
    {
var element=document.getElementById(e.data.id)
if (element.src.match("images/Cowboys.jpg")) 
{
    element.src="images/Countryside_bg.jpg";
    }
   else
   {
   element.src="images/Cowboys.jpg";
     }

    }

   });
     </script>

Answer 1

在这种情况下，您不需要使用循环或其他 JQuery 函数，只需使用一个选择器即可匹配所需的所有元素。另外，如果不需要，也不应该将 jQuery 与纯 Javascript 代码合并。我重写了你的代码，现在全部用 jQuery 编写:

HTML:

<div class="interestsMarquee">
  <img src="sportsInterest.png" class="trigger" data-index="1" id="interest1" />
  <img src="sportsInterest.png" class="trigger" data-index="1" id="interest2" />
  <img src="sportsInterest.png" class="trigger" data-index="1" id="interest3" />
  <img src="sportsInterest.png" class="trigger" data-index="1" id="interest4" />
  <img src="sportsInterest.png" class="trigger" data-index="1" id="interest5" />
</div>

Jquery:

$(".interestsMarquee img").hover(function(){
    $(this).css(
          "width":"115%",
          "height":"70px",
          "margin-left":"-10px"
        );
    },function(){
    $(this).css(
         "width":"95%",
         "height":"56px",
         "margin-left":"3px");
}).click(function(){
    //Lets get the index of the img
    var index = ($(this).data('index');
    var src = "images/default_img.jpg";
    //Switch index to update src
    switch (index ) {
       case (1): src = 'images/image1.jpg';
                 break;
       case (2): src = 'images/image2.jpg';
                 break;
       case (3): src = 'images/image3.jpg';
                 break;
       case (4): src = 'images/image4.jpg';
                 break;
       case (5): src = 'images/image5.jpg';
                 break;
     }
     //adding the new src to the #myImage div
     $('#myImage').attr('src', src);
 });

变化:

• 就像您使用 .css 一样，您可以在 hover 之后推送 click() 事件来匹配相同的选择器
• 在事件函数中使用 $(this)
• 您可以使用 attr('src') 获取 src 属性。
• 一次性更改多个 CSS 属性

fiddle :http://jsfiddle.net/sHxR3/

更新:我已更新代码以根据单击的 img 更改外部 div img src。