4

好的，所以我有一个大约 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>
4

4 回答 4

2

在这种情况下，您不需要使用循环或其他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推送click()事件hover
  • $(this)在事件函数中使用
  • 可以attr('src')用来获取src属性。
  • 一次性更改多个 CSS 属性

小提琴：http: //jsfiddle.net/sHxR3/

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

于 2013-02-04T10:07:53.383 回答
1

我将通过展示如何改进 jQuery 代码以及如何一次性解决您的问题来尝试回答您的问题！:)

首先，您可以通过将.css()调用重构为一个调用来简化代码。这将使整个代码运行得更快，因为您不会在每次调用.css().

所以那段代码将从

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

到

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

最后，Adil 打败了我，你可以将悬停事件绑定到一个类。并且遵循他对选择器的建议也非常好！:)

希望这会有所帮助！:)

于 2013-02-04T10:10:57.103 回答
0

看看这里的 JQuery .each() 函数

于 2013-02-04T10:02:57.640 回答
0

这应该有效：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script>
    $(function(){
        $(".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(){
            src = $("#myImage").attr("src");
            if(src == "images/Cowboys.jpg"){
                $("#myImage").attr("src", "images/Countryside_bg.jpg");
            }else{
                $("#myImage").attr("src", "images/Cowboys.jpg");
            }
        });
    });
</script>
<title>Untitled Document</title>
</head>

<body>

<div class="interestsMarquee">
    <img src="sportsInterest.png" style="cursor:pointer;" alt="sports" />
    <img src="sportsInterest.png" style="cursor:pointer;" alt="music"  />
    <img src="sportsInterest.png" style="cursor:pointer;" alt="hunting" />
    <img src="sportsInterest.png" style="cursor:pointer;" alt="exercise" />
    <img src="sportsInterest.png" style="cursor:pointer;" alt="shopping" />
</div>

<img id="myImage" src="images/Cowboys.jpg" />

</body>
</html>

希望能帮助到你！

于 2013-02-04T10:32:31.187 回答