Question

我正在尝试检查手风琴是否被触发或点击。我有多个手风琴。如果我要点击一个，我怎么能确定是否点击了手风琴？

这是我目前的代码：

<div class="panel-heading">
    <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
        href="#collapseOne"></a>
    </h4>
</div>
 <div class="panel-heading">
    <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" 
        href="#collapseTwo"></a>
    </h4>
  </div>



<div id="collapseOne" class="panel-collapse collapse">
    <div class="panel-body">
    // Value inserted here after passing to ajax
    </div>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
    <div class="panel-body">
    // Value inserted here after passing to ajax
    </div>
</div>


$.ajax(
{
    type: "POST",
    url: "getAccordion.php", // something I want to query
    data: {type:type},
    dataType: 'json',
    success:function(data) 
    {
        //pass values to body of accordion
    }
}

Answer 1

您可以执行类似

的操作

＆＃13;

$('a[data-toggle="collapse"]').click(function(){
  console.log($(this).attr('href')); // Here you will get the targeted ID
  var targetID = $(this).attr('href');
  
  /*$.ajax({
  	url: url,
    method: 'POST',
    data: {id:targetID}
    ...
  });*/
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="panel-heading">
    <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">test</a>
    </h4>
</div>

<div id="collapseTwo" class="panel-collapse collapse">
    <div class="panel-body">
    // Value inserted here after passing to ajax
    </div>
</div>

＆＃13;

我已经注明了AJAX电话，您需要根据您的要求启用该电话。

我已附加click event个anchor标记。

希望这会对你有所帮助。

Answer 2

您希望从初始页面加载“延迟”加载一些额外内容。

您不希望它在每个标签页上单击打开时加载！
因此，存储哪些标签已打开的数组将非常有用。

然后，仅当选项卡id（存储在锚点href中）不在该数组中时，脚本才会继续执行Ajax请求。

其他data属性在您的标记中非常有用，因此您可以通过click传递该属性以向数据库发出正确的请求。
请参阅HTML标记中的data-id。

console.clear();

// An array to store loaded tabs.
var tabsLoaded = [];

// Tab click handler
$("[data-toggle]").on("click", function(){
  
  var href = $(this).attr("href");
  //console.log( href );
  
  var id = $(this).data("id");
  //console.log( id );

  // Proceed to Ajax request only if that tab hasn't already been loaded.
  if( tabsLoaded.indexOf(href) == -1){
    
    // Store that tab id in array to prevent useless requests
    tabsLoaded.push(href);
    
    console.log("Here we go Ajax!")
    /*    // Ajax can't work in this snippet... But that is the code I suggest.
    // Ajax!
    $.ajax({
      type: "post",
      url: "getAccordion.php",
      data: {id:id},            // Pass the id got from the data-id
      dataType: 'json',
      success: function(data){
        //pass values to body of accordion
        $(href).html(data.someProperty);
      }
    });
    */
    
    // Simulating an Ajax response
    $(href).html("Hello! I'm Ajax response from query of id "+id+".");
  }else{
    // That else only is usefull for that demo... You can remove it.
    console.log("No need for Ajax, the content is already loaded.")
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="panel-heading">
  <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" data-id="1">Tab 1</a>
  </h4>
</div>
<div class="panel-heading">
  <h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" data-id="2">Tab 2</a>
  </h4>
</div>

<div id="collapseOne" class="panel-collapse collapse">
  <div class="panel-body">
    <!-- Value inserted here after passing to ajax -->
  </div>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
  <div class="panel-body">
    <!-- Value inserted here after passing to ajax -->
  </div>
</div>

如何检查手风琴是否被点击以便我可以将值传递给ajax？

2 个答案: