1

我有一个外部 div，当我将鼠标悬停在它上面时，我希望第二个子元素在 jquery 中切换一个类。我相信我已经关闭了代码，我认为我遇到的问题与我选择的内容有关，并且没有得到正确的选择器，因为我不完全理解 id、class 或 this 之间的区别。谢谢你的帮助！（我不能将它们全部分配给一个类，因为会有多个相同代码块）

<script>
function color_toggle(id){

     selection = $(this) + ' img:nth-child(2)';
     $( selection ).toggleClass("grey");
}
</script>



<div class="row-fluid supplier_new" onmouseover="color_toggle(this);" onmouseout="color_toggle(this);">
        <div class="span3 supplier_logo">
             <h4>APV Manufacturing</h4>
            <img class="grey" src = "img/suppliers/55555/logo.png" />
        </div>

        <div class="span1" style="padding-left:15px;">
            <img class="grey" src="http://aerofied.com/sites/all/themes/aerofied/css/images/icon-verified.png">
            <br><br>
            <img class="grey" src="http://aerofied.com/sites/all/themes/aerofied/css/images/icon-preferred.png">
        </div>
    </div>
4

3 回答 3

4

由于您将this作为参数传递给函数id，因此您需要$(id).

但是你可以这样称呼它：

onmouseover="color_toggle($(this))"

只需使用id.find("img:eq(2)").toggleClass("gray")

或者你可以这样做：

onmouseover="color_toggle.call(this);"

还有你的 JS：

function color_toggle() {
    $(this).find("img:eq(2)").toggleClass("gray");
}

或者你可以只使用 CSS：

.someclass:hover img:nth-child(2) {
    /* apply style here */
}
于 2013-10-10T21:48:52.817 回答
1

我一秒钟前刚刚更新了一个答案，请在此处查看更新

https://stackoverflow.com/a/19227334/1743214

所以我将解释这一点，以及何时使用它。这就像指向某物..

  • 你不能指着不存在的东西。或者刚出去。
  • 它必须在那里，否则你是doing_it_wrong()。

我什么时候使用this

我将在这里介绍基本情况（所以这不是完整的答案）。this在元素上应用函数时使用。

所以可以说我隐藏了一个元素。

$('#header').hide(5000 , function(){
    $(this) //in this case im pointing at header . because it is the element i have selected . 
})

为什么要使用它，让我们再次使用id？！

它可以在前面的例子中工作，但是看看这个

<ul>
    <li class="someone" > me <li>
    <li class="someone" > you <li>
    <li class="someone" > he <li>
</ul>

$.each($('.someone'), function(){
    $('.someone') // this will jsut select all the 3 elements again
    $(this) // will get the current element that we are looping though
    // if i do
    console.log($(this).text()) // this will log me then you  then he
})

深入了解this，谷歌主题或阅读一些书籍:)。

于 2013-10-10T22:33:06.477 回答
1

一些东西：

(1) 为代码中的元素添加了 ID 属性<img>（它们丢失了）

(2) 删除了内联 javascript，在脚本标签中使用了 jQuery（总是最好这样做）

(3) 修正 jQuery 选择器：

$(this).find('img:eq(2)').attr('id');  // <-- But the ID attr has to EXIST

jsFiddle Demo

在上面的 jsFiddle 演示中，当您将鼠标悬停在 DIV 上时，您将看到第三张图像周围的背景打开/关闭。

这是代码：

<script type="text/javascript">
    $(document).ready(function() {
        $('.row-fluid').hover(
            function() {
                hovIn($(this));
            }, 
            function() {
                hovOut($(this));
            }
        );

        function hovIn($this){
            //$this.css({'background':'wheat'});
            var myId = $this.find('img:eq(2)').attr('id');
            color_toggle( myId );
        }
        function hovOut($this){
            //$this.css({'background':'white'});
            var myId = $this.find('img:eq(2)').attr('id');
            color_toggle( myId );
        }
        function color_toggle(id) {
            $('#'+id).toggleClass("grey");
        }

    }); //END document.ready
</script>

由于我们使用的是 jQuery，请确保您引用了 jQuery 库（通常在<head>页面顶部的标签中）：

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

笔记：

你应该打印/记住这个 jQuery 选择器和事件列表。单击Next Chapter六次，您将循环浏览所有页面。

于 2013-10-10T22:20:07.250 回答