Question

我在动态创建的切换按钮上发生了一些奇怪的行为。它们似乎在firefox上工作正常，但在Chrome和Safari上，加上iPhone的Safari浏览器，div内容的显示和隐藏是不一致的，直到你刷新页面，然后所有按钮似乎都能正常工作。

如果您查看下面的链接，然后选择任何选项（例如，达到最终，顶级击球手，顶级保龄球等），您将进入一个填充了切换按钮的页面，内容未显示。

http://m.bestoddsindia.com/#/odds/cricket/competitions-level1/competitions-level2/display-all-outright-odds.php?comp1=Indian Premier League

通常，前几个按钮不起作用，但其余按钮会起作用。真的很奇怪。有谁知道是什么原因引起的？注意，javascript和list元素包含在php while循环中，以从数据库中获取正确的值，$ idName =“bettype”。 $ I; （其中$ i在每次循环传递期间递增。）

JAVASCRIPT

<script type="text/javascript">
$(document).ready(function(){
  $("#button<? echo $idName; ?>").click(function(){
    $(".divider<? echo $idName; ?>").toggle();
  });
});
</script>

HTML

<li class="dropdown-tap-bg">
<div class="dropdown-tap" id="button<?php echo $idName; ?>">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="70%" align="left"><span class="result"><?php echo ucwords($row_mainvalues['result']);?></span></td>
    <td align="left" class="price"><?php echo $row_mainvalues['Highest_Price'];?></td>
    <td align="right">
    <table class="show-all-bookmakers" width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center" valign="middle">Show/Hide<br/>Bookmakers</td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</div></li>

<li class="divider<?php echo $idName; ?> dropdown-secondaryodds-panel" style="display:none">
<!-- div content ->
</li>

Answer 1

我建议修改代码以使用类而不是ID。这样你就可以给所有按钮提供相同的类，并使一个选择器找到它们并且（在黑暗中）绑定它们。您使用的id迭代器用于设置data-id之类的属性，您可以使用$(this).attr("data-id")在点击代理中访问该属性，而{{1}}可用于显示或隐藏您尝试切换的特定元素。

Jquery切换动作不一致

1 个答案: