在 jQuery 中定位特定的 div

Question

我确信这是一个非常简单的答案，但我一直在努力让这件事发挥作用。

我想做的是在一些文本框上创建一个了解更多按钮。当您单击了解更多时，该框应向下展开并显示更多信息。

我遇到麻烦的地方实际上是让了解更多点击功能对应于它旁边的特定文本框......它正在扩展所有文本框，而不是我想要的特定文本框。

其中还有一个功能可以使用颜色插件为背景设置动画。我已经有这个功能了。只是针对特定的框让我发疯。

我可以将点击功能添加到 .bind，但我不能使用它来定位任何东西。

$(document).ready(function(){
    var service = $(".service"), text = $(".service-text, h1.service-heading"); 

    $('.learn').bind({
    mouseenter: function() {
            $(service).animate({ backgroundColor: "#000000", }, 800);
            $(text).animate({ color: "#FFFFFF", }, 800);
        },
    mouseleave: function() {
            $(service).animate({ backgroundColor: "#FFFFFF", }, 800);
            $(text).animate({ color: "#000000", }, 800);
        }
    });
});

更新：

这是我正在使用的 HTML

<div class="service box-round">
<h1 class="service-heading">WEB DEVELOPMENT</h1>
    <div class="service-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<span class="more-info">...Click for more info</span></div>
    <div class="more-text">More Text</div>
</div>
            <div class="learn"><span class="more">learn more</span><span class="less">learn less</span></div>

我的想法是使用隐藏和显示功能来了解更多并减少学习。

Answer 1

$('.learn').bind({
mouseenter: function() {
            $(service).animate({ backgroundColor: "#000000", }, 800);
            $(text).animate({ color: "#FFFFFF", }, 800);
},
mouseleave: function() {
            $(service).animate({ backgroundColor: "#FFFFFF", }, 800);
            $(text).animate({ color: "#000000", }, 800);
}  
});

这部分可以改成：

$('.learn').hover(function() {
    service.css({ backgroundColor: "#000000" });
    text.css({ color: "#FFFFFF" });
}, function() {
    service.css({ backgroundColor: "#000"});
    text.css({ color: "#FFFFFF" });
});

为什么我不使用 animate - 因为没有插件的 jQuery 无法为背景设置动画和输入文本颜色

更新：

我不知道这是否是你要找的，但是：http://jsfiddle.net/DJLZC/7/

Answer 2

您可以尝试让“了解更多”按钮链接到针对特定 div 的哈希引用，然后使用 jQuery 插件拦截调用并展开目标 div。

一个例子是有一个像这样的 div：

<div id="example-using-vars">
    <h3>Using Variables in ...</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

然后用像这样的超链接触发它

<a href="#example-using-vars">Learn more</a>

Answer 3

$(document).ready(function(){
    $service = $(".service");
    $text = $(".service-text, h1.service-heading"); 

    $('.learn').bind({
    mouseenter: function() {
            $($service).animate({ backgroundColor: "#000000", }, 800);
            $($text).animate({ color: "#FFFFFF", }, 800);
        },
    mouseleave: function() {
            $($service).animate({ backgroundColor: "#FFFFFF", }, 800);
            $($text).animate({ color: "#000000", }, 800);
        }
    });
});

Answer 4

仅根据您的描述而不是提供的代码，这就是我之前实现“显示更多”链接以展开/显示文本区域的方式。这应该让您了解如何针对特定的<div> 而不是所有这些。

HTML

<div class="details">
  Name: John Doe<br>
  Address: 123 Test Drive, Testville
  Postal Code: A1A 1A1
</div>
<a class="detailLink" href="#">Show/Hide Details...</a> 

jQuery

$(function() {  
    $('.detailLink').click(function() {
        $(this).prev('.details').toggle('medium');
        return false;
    });
 });

所以我们的想法是使用实​​际的“了解更多”链接作为您的启动点，然后使用 jQuery 的树遍历功能来切换前面的详细信息 <div> 的可见性。