Question

我正在使用jquery翻转插件。 https://nnattawat.github.io/flip/在两个div元素之间切换。我有一个按钮，用于在两个div元素之间切换。我能够实现它。但是当我点击＆＃34; a＆＃34;时，我想拥有相同的功能。标签

完美地工作：

    <button type="button" id = "toggle1" class = "toggle">Click Me!</button>

<script>
$(document).ready(function() {
  $("#flip1").flip({
 trigger: 'manual'
  });
$('#toggle1').click(function() {
  $("#flip1").flip('toggle');
  });

});
 </script>

现在我想用

替换按钮

<a id = "toggle1"><i class="some-icon"></a>

当我点击标签时没有任何反应。有人可以指导我。

修改

    <div class = "flip" id = "flip1">
        <div class = "front">
                               <div id = "chartAnchor1" class="x_content">
                             // some front stuff here
                               </div>
                             </div>
                               <div class = "back">

                                <div id = "tableAnchor1" class="x_content">
                              // some flipped stuff here
                              </div>
        </div>
</div>

编辑：在div的菜单栏中添加时无法正常工作。我在这里添加我的代码。

<div class="col-md-6 col-sm-6 col-xs-12">
   <div class="x_panel">
      <div class="x_title">
         <h2>INCOME<small>Sessions</small></h2>
         <ul class="nav navbar-right panel_toolbox">
            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
            </li>
            <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class          ="fa fa-wrench"></i></a>
               <ul class="dropdown-menu" role="menu">
                  <li><a href="settings.html">Settings 1</a>
                  </li>
                  <li><button type="button" id = "toggle1" class = "toggle">Click Me!</button>
                  </li>
               </ul>
            </li>
            <li>
               <a id="toggle1">link</a><!-- <a id = "toggle1"><i class="fa fa-external-link user-profile-icon">nm</i></a> -->
            </li>
            <li><a class="close-link"><i class="fa fa-close"></i></a>
            </li>
         </ul>
         <div class="clearfix"></div>
      </div>
      <div class = "flip" id = "flip1">
         <div class = "front">
            <div id = "chartAnchor1" class="x_content">
            </div>
         </div>
         <div class = "back">
            <div id = "tableAnchor1" class="x_content">
            </div>
         </div>
      </div>
   </div>
</div>

下面的截图：

Answer 1

您无法在同一个id的2个不同元素上附加点击事件，您需要另一个id用于锚点a，例如toggle2

$(document).ready(function() {
  $("#flip1").flip({
 trigger: 'manual'
  });
$('#toggle1').click(function() {
  $("#flip1").flip('toggle');
  });
$('#toggle2').click(function() {
  $("#flip1").flip('toggle');
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
  
  
<a id = "toggle2"><i class="some-icon">Click me too</i></a>

<button type="button" id = "toggle1" class = "toggle">Click Me!</button>

<div class = "flip" id = "flip1">
  <div class = "front">
    <div id = "chartAnchor1" class="x_content">
      // some front stuff here
    </div>
  </div>
  <div class = "back">

    <div id = "tableAnchor1" class="x_content">
      // some flipped stuff here
    </div>
  </div>
</div>

Answer 2

似乎可以使用锚标记。

＆＃13;

$(document).ready(function() {
$("#flip1").flip({
 trigger: 'manual'
});
$('#toggle1').click(function() {
  $("#flip1").flip('toggle');
});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
  


<a id="toggle1"><i class="some-icon">link</a>

    <div class = "flip" id = "flip1">
        <div class = "front">
                               <div id = "chartAnchor1" class="x_content">
                                 test1
                               </div>
                             </div>
                               <div class = "back">

                                <div id = "tableAnchor1" class="x_content">
                                  test2
                              </div>
        </div>
</div>

＆＃13;

如何在使用＆＃34; a＆＃34;时触发点击事件标签

2 个答案: