2

動的に作成されたトグル ボタンで奇妙な動作が発生しています。Firefox では問題なく動作するようですが、Chrome と Safari、さらに iPhone の Safari ブラウザでは、ページを更新するまで div コンテンツの表示と非表示に一貫性がなく、すべてのボタンが正しく動作しているように見えます。

以下のリンクを表示し、いずれかの選択肢 (例: To Reach Final、Top Batsman、Top Bowler など) を選択すると、コンテンツが表示されていないトグル ボタンで満たされたページに移動します。

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 はループ パスごとに段階的に増加します。)

ジャバスクリプト 

<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>
4

1 に答える 1

1

ID の代わりにクラスを使用するようにコードを変更することをお勧めします。そうすれば、すべてのボタンに同じクラスを与え、1 つのセレクターを作成してそれらすべてを見つけ、(暗闇の中で) それらをバインドすることができます。使用idしているイテレータはdata-id、クリックデリゲート内でアクセスできるような属性を設定するために使用されます。$(this).attr("data-id")これを使用して、トグルしようとしている特定の要素を表示または非表示にすることができます。

于 2012-04-26T06:10:47.513 に答える