0

我的问题是这样的：

我在我的 HTML 中使用 javascript 生成了这些列表：

<div class="row" id="reveal-listing-id">
    <div class="large-12 columns">
        <div class="panel">
            <div class="row">
                <div class="large-12 columns">
                    <div class="listing-header-container">
                        <div class="listing_header_section">15 Broad Steet <span class="blue-pips">|</span> Unit #number <span class="blue-pips">|</span> New York, NY</div>
                    </div>
                </div>
            </div>
            <div class="row listing" id="listing-id">
                        <p class="subtleFont">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
                            nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut 
                            wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
                            lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure 
                            dolor in hendrerit in vulputate

单击时的 javascript 将显示包含所有列表信息的 div，该列表信息现在具有 id="listing-id"。Java 脚本如下所示：

  $( "#reveal-listing-id" ).on( "click", function( event, ui ){
    $( "#listing-id" ).toggle( "blind", 600);
  });

现在我知道对于每个 HTML 元素，当我运行我的 javascript 来构建它们时，我可以轻松地放置一个唯一的 ID 并显示 ID，但是我怎样才能使 onClick 事件显示正确点击的相应 DIV 而无需对每个元素进行硬编码？

例如，我不想做类似的事情：

  $( "#reveal-listing-1" ).on( "click", function( event, ui ){
    $( "#listing-1" ).toggle( "blind", 600);
  });
  $( "#reveal-listing-2" ).on( "click", function( event, ui ){
    $( "#listing-2" ).toggle( "blind", 600);
  });
  $( "#reveal-listing-3" ).on( "click", function( event, ui ){
    $( "#listing-3" ).toggle( "blind", 600);
  });
  $( "#reveal-listing-4" ).on( "click", function( event, ui ){
    $( "#listing-4" ).toggle( "blind", 600);
  });

列表的数量可以从 5 到 500 不等，因此我需要一个动态解决方案。

4

3 回答 3

0

你可以 ：

  • 使用选择器为您提供所有 id 以“reveal-listing-”开头的元素
  • 根据点击元素的 id 计算“#listing-x”id

这将是这样的：

 $('[id^="reveal-listing-"').on("click", function( event, ui ){
     $("#listing-"+this.id.slice(15)).toggle( "blind", 600);
 });

如果您更喜欢使用事件委托来最小化绑定数量，请使用

 $(document.body).on("click", '[id^="reveal-listing-"', function( event, ui ){
于 2013-09-10T18:45:56.947 回答
0

在设置事件侦听器后创建的任何控件都不会包含在将发布该事件的控件中。

因此，如果您想这样做，您可以在创建控件时显式绑定控件上的事件，也可以在代码中创建两个函数。

一个是连接事件功能，您将在其中看起来像：

 function connectEvents(){
    $( "#reveal-listing-id" ).on( "click", function( event, ui ){
       $( "#listing-id" ).toggle( "blind", 600);
    });
 }

还有另一个断开事件的功能

function disconnectEvents(){
   $( "#reveal-listing-id" ).each(function(control){
      control.off('click');
   });
}

然后在文档准备好时调用 connectEvents 函数。

在您想要动态创建另一个控件时，您需要首先调用 disconnectEvents 函数，以便所有控件的所有事件都断开连接并运行您的 connectEvens 函数以重新连接所有控件的所有事件（以及新控件）

*将从$("#...")查询返回的所有控件

于 2013-09-11T09:34:34.940 回答
0

如果你有那些 div “reveal-listing-id”是来自分页的 AJAX 响应，那么未来的 div 将不会绑定到该 jQuery 函数。那是因为 jQuery 在加载时绑定并且不会重新绑定来自 ajax 响应的任何内容。

如果你想要一个适用于每个 div 甚至未来 div 的通用绑定，你应该这样做：

<div id="list_container">
  <div class="row reveal-listing">
  </div>
  <div class="row reveal-listing">
  </div>
  <div class="row reveal-listing">
  </div>
</div>

JS：

$('#list_container').on('click', '.reveal-listing', function() {
  $(this).find('#listing-id').toggle("blind", 600);
});

请注意，我在您的周围创建了一个 div，因此您只绑定它而不是整个文档。

于 2013-09-10T19:21:20.173 回答