JQuery клик по элементам с разными идентификаторами - PullRequest
Новая
       17

JQuery клик по элементам с разными идентификаторами

0 голосов
/ 20 апреля 2020

У меня есть таблица со столбцом состояния, в которой отображается значок воспроизведения / паузы материала в зависимости от состояния. У каждой строки свой идентификатор, моя проблема в том, что я не могу сделать так, чтобы значок переключался по щелчку, если я не использую идентификатор непосредственно в коде, и это не решит мою проблему. Я хочу, чтобы код обрабатывал разные идентификаторы. Я попробовал this.id, он работает с alert (), но в коде это не так.

Что я делаю не так?

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');
            });
        });
         });

1 Ответ

2 голосов
/ 20 апреля 2020

Вам не нужны идентификаторы в этой ситуации, просто используйте объект, который вызывает событие. Попробуйте это: 

$(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>
...