如何通过了解节点的价值来访问dom&&通过了解价值获得手风琴指数

时间:2012-08-01 05:52:26

标签: javascript jquery html dom accordion

我有两个问题:

1)由于我的html内容结构相似,唯一的区别是类标题内容不同。我也试过使用$(div .title:contains(“cat”)) $(div .title).text()=“cat”)

2)如何通过检查$(div a)内容是必需的内容来获得手风琴的索引。我尝试使用$(div a).text()==“cat”

检查以下代码:

HTML1内容

    <div class="mod moduleselected" id="mod969">
    <div class="content module moduleselect">
    <div class="hd" ><div class="inner">
    <div class="title">cat</div>
    <ul class="terminallist"></ul>
    <ul class="buttons">
    <li class="help"></li>
    <li class="show" ></li>
    </ul>
    </div>
    </div>
    </div>

    <div class="mod moduleselected" id="mod969">
    <div class="content module moduleselect">
    <div class="hd" ><div class="inner">
    <div class="title">rat</div>
    <ul class="terminallist"></ul>
    <ul class="buttons">
    <li class="help"></li>
    <li class="show" ></li>
    </ul>
    </div>
    </div>
    </div>

<div class="mod moduleselected" id="mod969">
    <div class="content module moduleselect">
    <div class="hd" ><div class="inner">
    <div class="title">dog</div>
    <ul class="terminallist"></ul>
    <ul class="buttons">
    <li class="help"></li>
    <li class="show" ></li>
    </ul>
    </div>
    </div>
    </div>

手风琴

        <div id="dia">
        <div id="dialog" title="Detailed FeedBack ">
        <div id="accordion">
        <h3><a href="#">dog</a></h3>
        <h3><a href="#">cat</a></h3>
        <h3><a href="#">rat</a></h3>
        </div>
        </div>
        </div>

的Javascript

        $('div .title').mouseover(function() {
    if($("div a").text().indexOf("cat")!=-1)
    {
    $("#accordion").accordion("activate", 1);
    }
    $('div .title').mouseleave(function(){$("#accordion").accordion("activate", -1); });
        });

以下是我正在尝试使用此JavaScript代码。当我将鼠标悬停在猫的内容上时,我想要打开带有猫内容的手风琴。当我离开它关闭手风琴选择时。

当我将鼠标悬停在html内容cat,rat上时。它应该并排打开那些内容的手风琴按钮。例如:我在鼠标上徘徊(html内容)我应该看到手风琴鼠打开(或活动即内容可见)。

2 个答案:

答案 0 :(得分:1)

Updated (see demo)

听起来你想要这样的东西:当内容部分悬停在上面时,找到该部分的标题,将其文本与手风琴中<a>元素的文本相匹配,然后激活该部分:

$(function() {
    $("#accordion").accordion();

    var links = $('#accordion a').map(function() {
        return $(this).text().trim().toLowerCase();
    }).toArray();

    $('div.content').mouseover(function() {
        var title = $(this).find('div.title').text().toLowerCase();
        var index = links.indexOf(title);
        if (index != -1) {
            $("#accordion").accordion("activate", index);
        }
    });
});​

P.S。 jQuery也有一个.hover()方法。

答案 1 :(得分:1)

它应该像以下一样简洁(有可能的小调整):

$('.content .title').hover(function(e){
    var index = this.textContent.split(/\W/)[1] - 1;    
    $("#accordion").accordion('activate', index);
});
​

小心HTML,因为这个正则表达式过于简单,因为它只抓取最后一个“单词”,在你的例子中是一个数字。我们减去一个得到一个从零开始的索引。如果您向元素添加更多文本,那将会中断。

请参阅:http://jsfiddle.net/35yGV/