JQuery按一下按钮切换具有不同id的元素

Question

我有一个有状态列的表，该列根据状态显示一个材料图标play/pause。每一行都有不同的ID，我的问题是，除非我在代码中直接使用ID，否则我无法使图标按一下按钮，这不会解决我的问题。我想要代码来处理不同的Ids。我尝试了this.id，它与一个警告()一起工作，但是在代码中，它不工作。

我做错了什么？

HTML

<table id="example" class="display" style="width:100%">
      <thead>
        <tr>
                    <th>satatus</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td ><i id="status-1" aria-hidden="true" medium="" class="v-icon notranslate material-icons theme--light">pause_circle_outline</i></td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td><i id="status-2" aria-hidden="true" medium="" class="v-icon notranslate material-icons theme--light">play_circle_outline</i></td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                </tr>

 </table>

JS

    $(document).ready(function(){
    $("i").click(function() {
            //alert($(this).attr("id"));
            $(this).attr("id").click(function(){
            //$("#status-1").click(function(){
                $(this).text($(this).text() == 'play_circle_outline' ? 'pause_circle_outline' : 'play_circle_outline');
            });
        });
         });

Answer 1

在这种情况下不需要ids，只需使用导致事件的对象即可。试试这个：

$(document).ready(function(){
    $(document).on('click', "i", function() {
            alert($(this).attr("id"));
            $(this).text($(this).text() == 'play_circle_outline' ? 'pause_circle_outline' : 'play_circle_online');
        });
});

​

$(document).ready(function(){
        $(document).on('click', "i", function() {
                alert($(this).attr("id"));
                $(this).text($(this).text() == 'play_circle_outline' ? 'pause_circle_outline' : 'play_circle_outline');
            });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="example" class="display" style="width:100%">
      <thead>
        <tr>
                    <th>satatus</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td ><i id="status-1" aria-hidden="true" medium="" class="v-icon notranslate material-icons theme--light">pause_circle_online</i></td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td><i id="status-2" aria-hidden="true" medium="" class="v-icon notranslate material-icons theme--light">play_circle_outline</i></td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                </tr>

 </table>

​