Question

将鼠标悬停在包含id="single-main"的div上时，如何在class="contract-list"文字中获取匹配ID的文字颜色以更改颜色？

我似乎有许多悬停和开启的例子。但是没有一个传递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>

Answer 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答案，我会看看其他答案。我只是想用你给我们的东西展示一个“有效”的例子。

Answer 2

你可以试试这个

HTML （注意id's已替换为classes的{{1}}代码中的ul

<强> JS

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

DEMO

Answer 3

使用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/

当鼠标悬停在具有相同id的另一个元素上时，jquery切换另一个ID的css

3 个答案: