在 jQuery 中定位特定的 div

发布于 2024-12-04 13:17:48 字数 1671 浏览 0 评论 0原文

我确信这是一个非常简单的答案,但我一直在绞尽脑汁地试图让这个东西发挥作用。

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

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

那里还有一个功能可以使用颜色插件对背景进行动画处理。我已经可以使用该功能了。仅仅针对特定的框就让我发疯了。

我可以将单击功能添加到 .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>

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

I am sure this is a pretty easy answer, but I have been pulling my hair out trying to get this thing to work.

What I'm trying to do is to create a learn more button on some text boxes. When you click on learn more, the box should expand down and show more information.

Where I am running into trouble is actually making the learn more click function correspond to the specific text box that it's next to... It's expanding all of the text boxes and not the specific one I want.

There is also a functionality in there to animate the background with the color plugin.. I already have that working.. Just targeting the specific boxes is driving me crazy.

I can add the click function to .bind, but I can't use this to target anything.

$(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);
        }
    });
});

UPDATE:

Here is the HTML I am using

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

My thought was to use a hide and show function for the learn more and learn less.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

憧憬巴黎街头的黎明 2024-12-11 13:17:48
$('.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/

$('.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);
}  
});

this part can be changed to:

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

why i'm not using the animate - because jQuery without plugins can't animate the background and input text color

update:

I don't know if it's what you are looking for, but: http://jsfiddle.net/DJLZC/7/

爱你是孤单的心事 2024-12-11 13:17:48

您可以尝试让“了解更多”按钮链接到针对特定 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>

You can try to let the "Learn more" button link to a hash reference that targets the specific div, and then use jQuery plugins to intercept the call and expand the targeted div.

An example would be to have a div like:

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

and then trigger it with a hyperlink like

<a href="#example-using-vars">Learn more</a>
放手` 2024-12-11 13:17:48
$(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);
        }
    });
});
$(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);
        }
    });
});
话少情深 2024-12-11 13:17:48

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

而不是所有它们。

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 的树遍历功能来切换前面详细信息的可见性<代码>

Based on your description alone and not on the provided code, this is how I have implemented a "Show more" link to expand/reveal text areas before. This should give you the concept on how you would target the specific <div> as opposed to all of them.

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;
    });
 });

So the idea is to use the actual "Learn more" link as your launch point, then use jQuery's tree traversal features to toggle the visibility of the immediately preceding details <div>.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文