0

div にカーソルをid="single-main"合わせると、UL 内の一致する ID のテキストの色をテキスト付きで取得して色class="contract-list"を変更するにはどうすればよいですか?

ホバーとオンの例がたくさんあるようです。ただし、ID を渡すものはありません。

私のHTMLは：

<div id="single-main" class="clearfix">                    
    <a id="postID" href="http:www.xxxxxx.xx/" title=" "><img width="112" height="150"     src="http:www.xxxxxx.xx/X.jpg" class="some class" alt="" title= "" /></a>
    <a id="postID2" href="http:www.xxxxxx.xx/" title=" "><img width="112" height="150" src="http:www.xxxxxx.xx/X.jpg" class="some class" alt="" title= "" /></a>    
</div>

<ul class="contract-list">
    <li>
        <a  id="postID" href="http://www.xxxxxx.xx/" rel="bookmark" title=" "> ADVERTISING</a>
    </li>
    <li>
        <a  id="postID2" href="http://www.xxxxxx.xx/" rel="bookmark" title=" "> ADVERTISING2</a>
    </li>
</ul>​​​​​​​​​​
4

3 に答える 3

1

W3C 標準に違反しているため、あなたのコーディング手法には強く反対します。あなたの HTML を使用して、動作するデモを提供します。

http://jsfiddle.net/c3rfq/4/

この JavaScript を使用して、定義した div と ul のそれぞれの内部を調べました。このようにして、パターンに従って好きなだけ画像とリンクを追加できますが、ID の代わりにクラスを使用することを強くお勧めします。

$('div#single-main a').hover(function(){
    $('ul.contract-list #'+$(this).attr('id')).css('color','red');
},function(){
    $('ul.contract-list #'+$(this).attr('id')).css('color','');
});

より良いstandards-based答えを得るには、他の答えを見てください。あなたが私たちに与えてくれたものを使って「実用的な」例を示したかっただけです。

于 2012-09-08T01:45:22.480 に答える
0

data-属性を使用して...

<div id="single-main" class="clearfix">                    
    <a data-id="postID" href="http:www.xxxxxx.xx/" title=" "><img width="112" height="150" src="http:www.xxxxxx.xx/X.jpg" class="some class" alt="" title= "" /></a>
    <a data-id="postID2" href="http:www.xxxxxx.xx/" title=" "><img width="112" height="150" src="http:www.xxxxxx.xx/X.jpg" class="some class" alt="" title= "" /></a>    
</div>

<ul class="contract-list">
    <li>
        <a id="postID" href="http://www.xxxxxx.xx/" rel="bookmark" title=" "> ADVERTISING</a>
    </li>
    <li>
        <a id="postID2" href="http://www.xxxxxx.xx/" rel="bookmark" title=" "> ADVERTISING2</a>
    </li>
</ul>

次に、次のスクリプトを使用できます...

$(function(){
    $("#single-main").on("mouseenter", "a", function(){
        $("#"+$(this).data("id")).css("color", "red");
    }).on("mouseleave", "a", function(){
        $("#"+$(this).data("id")).css("color", "");
    });
});

そして、ここにフィドルがありますhttp://jsfiddle.net/ZLEQw/

于 2012-09-08T01:44:22.990 に答える
0

あなたはこれを試すことができます

HTML (のタグでid's置き換えられた通知)classesula

<div id="single-main" class="clearfix">
    <a id="postID" href="http:www.xxxxxx.xx/" title=""><img width="112" height="150" src="http:www.xxxxxx.xx/X.jpg" class="some class" alt="" title= "" /></a>
    <a id="postID2" href="http:www.xxxxxx.xx/" title=""><img width="112" height="150" src="http:www.xxxxxx.xx/X.jpg" class="some class" alt="" title= ""/></a> 
</div>

<ul class="contract-list">
    <li>
        <a  class="postID" href="http://www.xxxxxx.xx/" rel="bookmark" title=" "> ADVERTISING</a>
    </li>
   <li>
       <a  class="postID2" href="http://www.xxxxxx.xx/" rel="bookmark" title=" "> ADVERTISING2</a>
   </li>
</ul>

JS

$(function(){
    $('#single-main a').on('mouseenter', function(){
        $('.'+$(this).attr('id')).css('color', 'red');
    }).on('mouseleave', function(){
        $('.'+$(this).attr('id')).css('color', 'black');
    });
});​

デモ。

于 2012-09-08T01:36:13.990 に答える