jquery顯示/隱藏只適用於第一行的PHP循環

我有一個由php while循環生成的表。當單擊一個編輯按鈕時，會有一個字段需要替換（它將包含用於更新該記錄的輸入字段）。jquery顯示/隱藏只適用於第一行的PHP循環

這適用於第一行，但沒有其他人工作。我假設在每個PHP循環之後，jquery必須被清除，但不知道這是如何完成的？

如果有人可以看到我錯過了一些明顯的東西，請告訴我！

一對夫婦行

<tr> 
     <td>2014-06-13</td> 
     <td>23:00:00</td> 
     <td>WC</td> 
     <td>Chile v Australia</td> 
     <td style="text-align:center"><span id="12942">2 - 0</span><span id="e12942" style="display:none">aa</span> 

     </td> 
     <td style="text-align:center">-</td> 
     <td><span id="12942"><button id="showEdit" class="btn btn-sm btn-primary 12942" rel="12942">Edit</button></span><span id="e12942" style="display:none"><button id="hideEdit" class="btn btn-sm btn-danger 12942" rel="12942">Cancel</button></span> 

     </td> 
    </tr> 
    <tr> 
     <td>2014-06-13</td> 
     <td>20:00:00</td> 
     <td>WC</td> 
     <td>Spain v Holland</td> 
     <td style="text-align:center"><span id="12941">2 - 2</span><span id="e12941" style="display:none">aa</span> 

     </td> 
     <td style="text-align:center">-</td> 
     <td><span id="12941"><button id="showEdit" class="btn btn-sm btn-primary 12941" rel="12941">Edit</button></span><span id="e12941" style="display:none"><button id="hideEdit" class="btn btn-sm btn-danger 12941" rel="12941">Cancel</button></span> 

     </td> 
    </tr>

腳本的一個例子

$("#showEdit").click(function() { 
    $("span#e"+$(this).attr('rel')).show(); 
    $("span#"+$(this).attr('rel')).hide(); 
    $("#showEdit."+$(this).attr('rel')).hide(); 
    $("#hideEdit."+$(this).attr('rel')).show(); 
    return false; 
}); 
$("#hideEdit").click(function() { 
    $("span#e"+$(this).attr('rel')).hide(); 
    $("span#"+$(this).attr('rel')).show(); 
    $("#showEdit."+$(this).attr('rel')).show(); 
    $("#hideEdit"+$(this).attr('rel')).hide(); 
    return false; 
});

感謝

史蒂夫

來源

2014-06-11 Steve Ball

您有一個名爲showEdit的重複ID，這是一個很好的開始。 – Patrick

在你的情況下，當你有多個重複的id時，jquery的id選擇器只會獲取它能夠在dom上找到的第一個id，這意味着如果你改變了重複的id並改爲使用類，它可能會更好：）

來源

2014-06-11 21:46:03 Patrick

感謝您的幫助。使用類是前進的方向！

<tr> 
<td>2014-06-13</td> 
<td>23:00:00</td> 
<td>WC</td> 
<td>Chile v Australia</td> 
<td style="text-align:center"> 
<span class="12942" style="display: inline;">2 - 0</span> 
<span class="e12942" style="display: none;">aa</span></td> 
<td style="text-align:center"> - </td> 
<td><span id="12942" style="display: inline;"><button id="" class="btn btn-sm btn-primary showEdit 12942" rel="12942">Edit</button></span><span id="e12942" style="display: none;"><button id="" class="btn btn-sm btn-danger hideEdit 12942" rel="12942">Cancel</button></span></td>

$(".showEdit").click(function() { 
    $("span#e"+$(this).attr('rel')).show(); 
    $("span#"+$(this).attr('rel')).hide(); 
    $("span."+$(this).attr('rel')).hide(); 
    $("span.e"+$(this).attr('rel')).show(); 
    return false; 
}); 

$(".hideEdit").click(function() { 
    $("span#e"+$(this).attr('rel')).hide(); 
    $("span#"+$(this).attr('rel')).show(); 
    $("span."+$(this).attr('rel')).show(); 
    $("span.e"+$(this).attr('rel')).hide(); 
    return false; 
});

再次更新的情況下，它可以幫助別人的小提琴（如果他們收拾一下吧！）

http://jsfiddle.net/QD564/2/

感謝指導我在正確的方向！

來源

2014-06-11 22:00:24

jquery顯示/隱藏只適用於第一行的PHP循環

回答

相關問題