0

以下は私のHTMLコードです：

    <table>
{foreach in smarty starts}
    <tr>
                        <td valign="top" id ="show_answer"><p  id="show_ans"><b>View Answer : </b></p></td>
                        <td align="right" width="7%" valign="top">
                        </td>
                      </tr>
                      <tr>
                        <td valign="top" id ="hide_answer"><b>Answer is here</b><br/><p  id="hide_ans" >Hide Answer</p></td>
                        <td align="right" width="7%" valign="top">
                        </td>

                      </tr>
{foreach in smarty ends}                      
                    </table>

私のjQueryコードはここにあります:

<script>
$(document).ready(function(){
  $("#show_ans").click(function(){ 
    $("#show_answer").hide(500);
    $("#hide_answer").show(500);
  });
  $("#hide_ans").click(function(){
    $("#hide_answer").hide(500);
    $("#show_answer").show(500);
  });
});
</script>

実際には、複数のそのような<tr>タグと複数の関連 ID (つまり、複数のIDshow_ansとshow_ansID) があります。コードを試してみると、最初の ID の組み合わせのみと一致するため、最初のレコードに対してのみ正しく機能しています。

しかし、ID の組み合わせごとに個別にコードを実行可能にする必要があります。しかし、動的に生成されたさまざまな ID を割り当てて、jQuery コードで使用する方法がわかりません。つまり、機能は個々の に対して機能する必要が<tr>あるため、ID は一意であり、jQuery 関数は適切に機能する必要があります。

誰でもこの問題を解決するのを手伝ってもらえますか? 前もって感謝します。

4

6 に答える 6

1

これを試して

<table>
i=1;
{foreach in smarty starts}
<tr>
     <td valign="top" id ="show_answer">
      <p  id="show_ans"+i><b>View Answer : </b></p>
     </td>
     <td align="right" width="7%" valign="top">
     </td>
</tr>
<tr>
     <td valign="top" id ="hide_answer"><b>Answer is here</b><br/>
       <p  id="hide_ans"+i >Hide Answer</p>
     </td>
     <td align="right" width="7%" valign="top">
     </td>
 <script type="text/javascript">
      $(document).ready(function(){
       $(".show_ans"+i).click(function(){
       $(this).parent().hide(500);
       $(this).parent().next().show(500);
      });

     $(".hide_ans"+i).click(function(){
       $(this).parent().hide(500);
       $(this).parent().prev().show(500);
     });
 });
 </script>
 i+=1;

</tr>
{foreach in smarty ends}                      
</table>

これは実行コードではありませんが、問題を解決したら同じタイプです。

于 2013-04-22T11:22:26.027 に答える
0 
<table>
  {foreach in smarty starts}
  <tr>
    <td valign="top" class ="show_answer"><p  id="show_ans"><b>View Answer : </b></p></td>
    <td align="right" width="7%" valign="top"></td>
  </tr>
  <tr>
    <td valign="top" class ="hide_answer"><b>Answer is here</b><br/>
      <p  id="hide_ans" >Hide Answer</p></td>
    <td align="right" width="7%" valign="top"></td>
  </tr>
  {foreach in smarty ends}
</table>

および JavaScript コード

$(document).ready(function(){
    $(".show_ans").click(function(){
        $(this).parent().hide(500);
        $(this).parent().next().show(500);
    });

    $(".hide_ans").click(function(){
        $(this).parent().hide(500);
        $(this).parent().prev().show(500);
    });
});

デモはこちら: http://jsfiddle.net/subodhghulaxe/aMWHN/1/

于 2013-04-22T11:01:33.837 に答える
0

できません。ID はページ上で一意である必要があります。同じ ID を持つ要素が複数ある場合、最初の要素のみがクエリ セレクタ API によって返されます。ID の代わりにクラスを使用するか、ループ内で一意の ID を生成する必要があります。私があなただったら、クラスを使用します。

于 2013-04-22T10:56:28.417 に答える
0

コードをループしているため、id 属性よりもクラスを使用することをお勧めします。

HTML:

<table>
    <tr>
        <td valign="top" class ="show_answer">
            <p  class="show_ans"><b>View Answer : </b></p>
        </td>
        <td align="right" width="7%" valign="top">
        </td>
    </tr>
    <tr style="display:none;">
        <td valign="top" class ="hide_answer">
            <b>Answer is here</b><br/>
            <p  class="hide_ans" >Hide Answer</p>
        </td>
        <td align="right" width="7%" valign="top">
        </td>

    </tr>
</table>

脚本：

$(".show_ans").click(function() {
  $(this).closest('tr').hide().next('tr').show()
});

$(".hide_ans").click(function() {
  $(this).closest('tr').hide().prev('tr').show()
});
于 2013-04-22T11:23:25.963 に答える