javascript在除第一行以外的所有行中的while循环上均不起作用

Question

我正在构建一个网页，其中我正在从数据库中获取值并显示在表中，在表中，我给了两个按钮，一个是红色，另一个是绿色。当我从索引页发布一些值时，sql查询执行并从中获取值db并在多行按钮中显示，该按钮也在循环显示，它也在所有行中显示。 我在按钮上应用jquery-意味着当单击第一个按钮时它变成绿色，而当单击另一个按钮时它变成红色。 问题在于它仅在第一行按钮中起作用。 在所有其他行按钮中，显示按钮jquery不起作用。 表示按下后按钮不是绿色和红色。

<?php
    $_SESSION['var']=$_POST['casetype'];
    mysql_connect("localhost", "root","") or die(mysql_error()); 

    mysql_select_db("Court1") or die(mysql_error()); 
    $data = mysql_query("SELECT * from causelist WHERE CaseType='" . $_SESSION['var'] . "'") or die(mysql_error()); 

    while($info = mysql_fetch_array( $data )){
        $_SESSION['SNo']=$info['SNo'];
        $_SESSION['CaseNo']=$info['CaseNo'];

        Print '<table width="100%" style="table-layout:fixed;">'; 
        Print '<tbody>';
        Print '<tr>';
        Print '<td class="blueh"  width="5px">';
        echo $_SESSION['SNo'];

        Print"</td> "; 

        Print " <td class=purpleh  width=25px  >";
        echo $_SESSION['CaseNo'];

        Print"</td> "; 

        Print" <td class=greenh width=2px >";
?>

    <form method="get" action="<?php 'save.php?$ct=$_SESSION[casetype]'?>">     
        <input type="hidden" name="green" value="1">
        <input type="submit"  name="b1" id="ButtonIdgreen" value="green"  >
    </form>
</td>
<td class= "redh" width="2px"  >

    <form method="get" action="save.php">
    <input type="hidden" name="red" value="0">
    <input type="submit" name="b2" id= "ButtonIdred" value="red" >

</td>

</tr>
</tbody>
</table>

<?php
    }
?>

My_js file

<script type="text/javascript">
    $('#ButtonIdred').on('click',function(){
        $(this).toggleClass('ButtonClicked1');
    });
</script>


<script type="text/javascript">
    $('#ButtonIdgreen').on('click',function(){
        $(this).toggleClass('ButtonClicked');
});
</script>

和CSS是

<style type="text/css">
    .ButtonClicked {
        background-color:#0C0;
    }

    .ButtonClicked1 {
        background-color:#F00;
    }
</style>

Answer 1

ID是单数，因此页面上只能有一个具有该ID的元素。 使用类名或元素类型。

$("table").on("click", '[type="submit"]', function() {
    var activeClass = this.value==="red" ? "ButtonClicked1" : "ButtonClicked";
    $(this).toggleClass(activeClass);
});

奇怪的是您使用的是“提交”按钮，因此表单将要提交，更改颜色不会因为页面刷新而停留。

Answer 2

您可以尝试创建事件侦听器，以影响页面上的所有按钮：

document.addEventListener('click', event, false);

function event(ev){
    var e = window.ev || ev;
    var target = e.target;
    if (target.tagName !== 'submit') return;
    // apply whatever style you want to the button here
    return false;
}

Answer 3

使用此jQuery选择器

$("input[type='submit'][name='b1']").on('click',function(){
$(this).toggleClass('ButtonClicked');
 });

$("input[type='submit'][name='b2']").on('click',function(){
$(this).toggleClass('ButtonClicked1');
 });