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（即多个show_ans和show_ansID）。现在，当我尝试使用我的代码时，它仅适用于第一条记录，因为它仅与第一个 id 组合匹配。

但是我必须使代码对每个 ids 组合单独可用。但我不知道如何分配动态生成的不同 id 并在我的 jQuery 代码中使用它们。简而言之，该功能应该适用于 individual <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

您可能想尝试使用 DOM 来选择不同的行，尤其是。如果你有一个元素表。

$("TR:first"): 第一行

$("TR:eq(3)") : 第 4 行

$("TR:last"): 最后一行

$("TR:odd"), $("TR:even"), $("TR:nth-child(odd)") 等等。

希望这可以帮助 ...

硅

于 2013-04-22T16:53:00.317 回答
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

由于您正在循环代码，因此使用 class 比使用 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 回答
0

你不能。ID 在页面上必须是唯一的。如果有多个具有相同 id 的元素，则查询选择器 api 将只返回第一个。您必须使用类而不是 id，或者您应该在循环中生成唯一的 id。如果我是你，我会使用课程。

于 2013-04-22T10:56:28.417 回答
0

实际上，您应该使用类而不是 ID（在名称中，唯一标识符）。

像这样的东西可能适用于 ids？（书面形式记忆，所以可能需要一些调整）

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

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

如果没有，请将它们更改为类。

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

    $(".hide_ans").click(function(){
        $(this).parent().hide(500);
        $(this).parent().prev().show(500);
    });
});
于 2013-04-22T10:57:53.953 回答