javascript - liにカーソルを合わせたときにdivを変更する方法

Question

私の意図

私hoverが上にいるときli、私は下#featuredThumbs liを交換したいdiv#productText

どうすればこれを達成できますか？liとの両方にアクティブ状態を追加したいdiv。また、ページが読み込まれたときに自動的に起動するようにします。

これが私のjsFiddleファイルです

JS

 $("#featuredThumbs li").hover( function() {
          $(".active").removeClass("active");
          $(this).addClass("active");
});​

HTML

<div id="container">
  <h2>Lorem ipsum!</h2>
  <div id="featuredProducts">
    <div id="productText">
      <div id="autoText" class="products">
        <h3>Auto Insurance</h3>
        <p>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
      </div>
      <!-- eo : products -->
      <div id="homeText" class="products">
        <h3>Auto Insurance</h3>
        <p>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
      </div>
      <!-- eo : products -->
      <div id="commercialText" class="products">
        <h3>Auto Insurance</h3>
        <p>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
      </div>
      <!-- eo : products -->
      <div id="lifeText" class="products">
        <h3>Auto Insurance</h3>
        <p>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea</p>
      </div>
      <!-- eo : products -->

    </div>
    <!-- eo: productText -->
    <ul id="featuredThumbs">
      <li id="autoProd"></li>
      <li id="homeProd"></li>
      <li id="commercialProd"></li>
      <li id="lifeProd"></li>
    </ul>
  </div>
  <!-- eo : featuredProducts -->

</div>
​

Answer 1

これはあなたが探しているものですか？

$(function() {
    $("#featuredThumbs li").hover( function() {
          $(".active").removeClass("active");
          $(this).addClass("active");
          $('.products').hide();
          $('#' + this.id.replace('Prod','Text')).show()
    });
});​​

製品divのタイトルを変更して、区別できるようにすることを忘れないでください（現在、すべて「自動車保険」と表示されています）。これもcssに追加しました：

.products { display: none; }

---

自動的に循環させるために、これは完全なコードです：

var intervalLen = 1000; //milliseconds 
$(function() {
    $("#featuredThumbs li").mouseover( function() {
          $(".active").removeClass("active");
          $(this).addClass("active");
          $('.products').hide();
          $('#' + this.id.replace('Prod','Text')).show();

          clearInterval(interval);
    });

    $("#featuredThumbs li").mouseout(function() {
        interval = setInterval(showNext,intervalLen);
    });
});

function showNext() {
    var visible = $('div', $('#productText')).not(':hidden');
    var next = visible.next('.products'); 
    if(next.length == 0) {
        next = $('div:first-child', $('#productText'));
    }
    visible.hide();
    next.show();
}

var interval;
​$(function() {
    interval = setInterval(showNext,intervalLen);
});

そして、CSSの余分な行は次のように変更されます。

.products:not(:first-child) { display: none; }

onmouseoverイベントが間隔を停止し、onmouseoutが間隔を再開するため、ユーザーが1つのアイテムにカーソルを合わせても循環しません。変更することでサイクルの速度を変更できますintervalLen

Answer 2

これを試して

     $("#featuredThumbs li").hover( 
     function(){
           $(this).addClass("active");
           $(this).append($('#'+$(this).attr('id').replace('Prod','Text')).html());
         },
     function(){
           $(".active").removeClass("active");
           $(this).html("");
        }
     );​

デモ

Answer 3

私は、これがあなたを助けるかもしれないと思います：

CSS:

.products { display:none; }
.products.active { display:block; }

JS:

$("#featuredThumbs li").hover( function() {
    $(".active").removeClass("active");
    var textid = this.id.replace("Prod", "Text");
    $(this).addClass("active");
    $("#" + textid).addClass("active");
});​

これは、li 要素の ID が「Prod」で終わり、一致するテキストが「Text」で終わる限り機能します。また、クラスactiveを最初の div に追加しました。

http://jsfiddle.net/KfEuL/

Answer 4

次のように実行できます。

// activate first item
$("#productText .products:first").show().siblings().hide(); 
$("#featuredThumbs li:first").addClass("active");

// set hover handler
$("#featuredThumbs li").hover( function() {
    $(".active").removeClass("active");
    $(this).addClass("active");

    // find div id based on li id
    var liId = $(this).attr('id');
    var liIdParts =  liId.split("-");
    var divId = liIdParts[0] + "Text";

    $("#" + divId)
        .addClass("active")
        .show()
        .siblings()
        .removeClass("active")
        .hide();    
});​

デモ

更新: 自動切り替えあり

デモ

var nextLi;
var autoSwitch = setInterval(function(){
    var firstLi = $("#featuredThumbs li:first");

    if(nextLi == undefined){
        nextLi = firstLi;
    }else{
        nextLi = nextLi.next("li");
        nextLi = (nextLi.length == 0) ? firstLi : nextLi;
    }  
    switchToDivForLi(nextLi);    
}, 3000);

$("#productText .products:first").show().siblings().hide(); 
$("#featuredThumbs li:first").addClass("active");

$("#featuredThumbs li").hover( function() {
    switchToDivForLi($(this));

    if(autoSwitch != undefined){
        clearInterval(autoSwitch);  
    }        
});

function switchToDivForLi(liElement){
    $(".active").removeClass("active");
        liElement.addClass("active");

        var liId = liElement.attr('id');
        $("#" + liId.replace("Prod", "Text"))
            .addClass("active")
            .show()
            .siblings()
            .removeClass("active")
            .hide(); 
}

Answer 5

このような意味ですか？

document.getElementById('featuredThumbs').onmouseover = function() {
  document.getElementById('productText').innerHTML = 'swap';
}