jquery - JQuery を使用して別の要素のコンテンツを更新する方法

Question

わかりましたので、次々と約 5 つのリンクのリストがあります。これらのリンクの 1 つにカーソルを合わせると、サイズを拡大する必要があります (他のリンクと区別するため)。そして、これらのリンクの 1 つをクリックすると、別の要素内の画像を更新したいと考えています。JQueryとCSSを使用して単一のリンクに対してこれを行う方法を理解しましたが、JQuery関数の4つの追加の（他の4つのリンク用の）セットを作成する必要があるかどうか、またはコードスペースを節約する方法があるかどうか疑問に思っていますある種のカウンターで for ループを使用します。ロジックに関する私の問題 (すべてを網羅する関数を 1 つだけ使用する) は、リンクがホバーされた後にリンクを区別する方法がわからないという事実に起因しています。これにより、リンクごとに異なる関数セットが必要だと思います。すべてのアドバイスを心から感謝します。

ここに私の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。1 つのセレクターで、必要なすべての要素を一致させることができます。また、必要がなければ、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>

Jクエリ:

$(".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クリックした画像に応じて外側の div 画像を変更するようにコードを更新しました。

Answer 2

jQueryコードを改善する方法と、問題を一度に解決する方法を示すことで、あなたの質問に答えようとします! :)

.css()まず、呼び出しを 1 つの呼び出しにリファクタリングすることで、コードを簡素化できます。の呼び出しごとに同じ要素をループする必要がないため、これによりコード全体が高速になります.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 が私を打ち負かしました。代わりに、ホバー イベントをクラスにバインドできます。そして、セレクターとの彼のアドバイスに従うことも非常に良いです! :)

これが役立つことを願っています！:)

Answer 3

これはうまくいくはずです：

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

それが役に立てば幸い！

Answer 4

ここで JQuery .each() 関数を見てください