单击元素以遍历容器

时间:2016-04-14 01:08:17

标签: javascript jquery html

现在我有一堆触发器和目标。当您点击var sourceDb = "db1"; var targetDb = "db2"; var selectStatement = string.Format("select sum(column1) from table1 inner join {0}.dbo.table2 on {0}.dbo.table2.ID = {1}.dbo.table3.id where somecolumn = @somecolumn ", targetDb, sourceDb); 时,下一个span应该在其上切换一个类。 这里的唯一案例是,Trigger Three实际上应该定位div 外面 div

ul

现在,我的jQuery看起来像这样。

<ul>
    <li>
         <span class="trigger">Trigger 1</span>
         <div class="target">Target to reveal when I press Trigger 1</div>
    </li>
    <li>
         <span class="trigger">Trigger 2</span>
         <div class="target">Target to reveal when I press Trigger 2</div>
    </li>
    <li>
         <span class="trigger">Trigger 3</span>
    </li>
</ul>

<div class="target">Target to reveal when I press Trigger 3</div>

我的问题有两处:

a)如何让“触发器3”的点击事件在包含var trigger = ".trigger"; var recipient = ".target"; $(trigger).click(function(e) { e.stopPropagation(); if ($(recipient).hasClass("open")){ $(trigger).not(this).next(recipient).removeClass("open"); } if($(trigger).hasClass("active")){ $(trigger).not(this).removeClass("active"); } $(this).next(recipient).toggleClass("open"); $(this).toggleClass("active"); }); 之外的地方移动到下一个ul

b)有没有办法更聪明地绑定目标并使用div或其他东西触发?我知道,对于id,您可以使用label来定位for ID。 jQuery中有等价的吗?

2 个答案:

答案 0 :(得分:2)

按照您的设计方法,我会对您的HTML进行以下修改

<ul>
    <li>
         <span class="trigger" data-target-id="target-1">Trigger 1</span>
         <div id="target-1" class="target">Target to reveal when I press Trigger 1</div>
    </li>
    <li>
         <span class="trigger" data-target-id="target-2">Trigger 2</span>
         <div id="target-2" class="target">Target to reveal when I press Trigger 2</div>
    </li>
    <li>
         <span class="trigger" data-target-id="target-3">Trigger 3</span>
    </li>
</ul>

<div id="target-3" class="target">Target to reveal when I press Trigger 3</div>

反过来会在你的事件监听器中产生一些更简单的编码:

var trigger = ".trigger";
var recipient = ".target";

$(trigger).click(function(e) {
  e.stopPropagation();
  recipient = '#' + $(this).attr('data-target-id');

  /* - Code that modifies classes down here - */

});

答案 1 :(得分:0)

您可以使用:

<WebBrowser x:Name="WebBrowserControl" Width="1000" Height="600" Source="https://www.1.com" cal:Message.Attach="[Event LoadCompleted]=[Action LoadCompleted($eventArgs)]"/>