0

我现在很难过。我在 .title 上实现了一个 click() 函数来切换其兄弟（表）是显示还是隐藏。这很好用。我的问题是我在 .title 内有另一个点击功能，它位于 a 标签上。当我单击 a 标签时，我想让表格保持打开状态，但 .title over 会写入并关闭它并将所有内容都搞砸。目前我在 a 标签上有一个 onClick() （它仍然不起作用），它是用 jQuery .click() 完成的，但我就是做错了。

<script>
function dateChange(boatInput, dateInput){

         $("table").first().children().remove();
         $("table").first().load("availability.asp?boatType="+ boatInput +"&date="+ dateInput +"");
}
$(document).ready(function() {
    $("table").first().load("availability.asp?boatType=PowerCatamaran&date=currentDate", function(response, status, xhr){
        if (status == "error") {
            var msg = "Sorry but there was an error: ";
            $("table").html(msg + xhr.status + " " + xhr.statusText);
        }
    });


    $(".title").click(function(){
      $(this).next().toggleClass("hide");
      var boatName = $(this).next().attr('id');
      if(!$(this).next().hasClass('hide')){
          if(boatName == "SailingCatamaran"){
              $(this).next().load("#");
          }
          else if(boatName == "PowerCatamaran"){
              $(this).next().load("#");
          }
          else{
              $(this).next().load("#");
          }
      }
      $(this).children().last().toggleClass("hide");
      $(this).find('.dateSelect').toggleClass("hide");

    });
}); 
</script>

<div class="title">
        <h2>Catamarans</h2>
        <div class="dateSelect">
            <div class="prev">
                <p>Prev</p>
                <a href="#">< month</a>
                <a href="#">< week</a>
                <a href="#">< day</a>
            </div>

            <div class="next">
                <p>Next</p>
                <a href="#" onClick="dateChange('PowerCatamaran', 'nextMonth')">month ></a>
                <a href="#">week ></a>
                <a href="#">day ></a>
            </div>
        </div>
        <div class="expand hide">
            Click to Expand
        </div>
     </div>

到目前为止，代码是静态的。我只需要一些实际的功能工作，然后才能使其全部动态化。我提前为糟糕的代码道歉！

4

2 回答 2

2

您需要通过调用event.stopPropagation()来防止点击事件从内部事件传播 

$('<tag-selector>').click(function(event){
    //do your stuff
    event.stopPropagation()
});
于 2013-07-03T03:20:53.587 回答
0

我对 CSS 和 jQuery 选择器有点生疏，但我认为一旦你用类标记元素，它也适用于所有子元素。

所以 div 中标记为 .title 的 a、p 等也继承了 .title 类。

如果您不希望这样，我建议更具体地使用用于选择哪些元素获得 .click() 处理程序的 jQuery 选择器。

也许：

$(".title > table").click(function(){...})

从 jQuery “子选择器”这表示将处理程序应用于在类 .title 中具有父元素的所有表元素

于 2013-07-03T03:28:06.067 回答