jquery从此单击中选择不同的选项

时间:2012-08-23 09:59:02

标签: javascript jquery html jquery-selectors html-parsing

我有这个代码并没有真正起作用

首先我添加一个img div

$('div.group_title a').prepend("<img src='replace_w_img_link_in_real'  width='20' height='20'  >");

然后我选择那个div

$('.el.group_title a img').on('click', function(e){
  e.preventDefault();
  var img2 = "img_link_path_2";
  var img1 = "img_link_path_1";

  var img = $(this).attr("src");

  if (img == img1) {
    $(this).attr("src",img2);
  } else {
    $(this).attr("src",img1);
  }

  $(this).nextUntil('.el.group_title', '.sidebar_project').toggle();
});

这里的问题是$('.el.group_title a img')只返回一个选择,当我$(this).nextUntil('.el.group_title', '.sidebar_project').toggle();时,我找不到div。

所以我的想法是它添加了一个img div,当你点击那个img时,img会改变并隐藏/显示内容.sidebar_project直到下一个img。我试图更改$(this).nextUntil('.el.group_title a img',但没有运气

根据要求,这是基础html

<div class="el group_title">
  <a href="link_path">NAME</a>
</div>
<div data-project-id="195677" class="sidebar_project">..</div>
<div data-project-id="9844" class="sidebar_project">..</div>
<div class="el group_title">
  <a href="link_path">NAME 2</a>
</div>
<div data-project-id="195677" class="sidebar_project">..</div>
<div data-project-id="9844" class="sidebar_project">..</div>

现在我添加img div

<div class="el group_title">
  <a href="link">
    <img alt="ACME org" src="link" width="20" height="20">org name</a>
</div>
....

这是jsFiddle - &gt; http://jsfiddle.net/6fdMc/

1 个答案:

答案 0 :(得分:0)

很难确切地说出你想要做什么,但听起来解决方案的一部分将是$( this ).closest( ".group_title" )。你想做点什么like this吗?这是我在代码中更改的部分:

原件:

$(this).nextUntil('.el.group_title', '.sidebar_project').toggle();

新:

$( this ).closest( ".group_title" )

  .nextUntil( ".group_title", ".sidebar_project" ).toggle();