jQuery .html（）不能在if語句中工作

我正在爲一個網站製作一個管理屏幕，當你發佈文章時。我已經做到了，所以表格中包含了所有帖子的價值。jQuery .html（）不能在if語句中工作

<table> 
    <tr> 
     <th>Post Title</th> 
     <th>Post Content</th> 
     <th>Tag</th> 
    </tr> 
    <tr> 
     <td id="examplePostTitle">Post Title</td> 
     <td id="examplePostContent">First 35 charecters of post........</td> 
     <td id="examplePostTag">Post Tag</td> 
     <td class="postEditButton" id="examplePostButton">edit</td> 
    </tr> 
</table>

我已經用jquery編寫了一些javascript，這樣當用戶單擊編輯行時就會填充輸入框。

var click = 1; 

if (click == 1) { 
    $('#examplePostButton').click(function() { 
     $('#examplePostTitle').html('<input type="text" value="Post Title" size="10"/>'); 
     $('#examplePostContent').html('<input type="text" value="First 35 characters of  post........" size="20"/>'); 
     $('#examplePostTag').html('<select><option>Animation</option><option>Programing</option>  <option>Robotics</option><option>Other</option></select>'); 
     click = 2; 
    }); 
} 

if (click == 2) { 
    $('#examplePostButton').click(function() { 
     $('#examplePostTitle').html('Post Title'); 
     $('#examplePostContent').html('First 35 characters of post........'); 
     $('#examplePostTag').html('Post Tag'); 
     click = 1; 
    }); 
}

出於某種原因，你可以單擊編輯按鈕一次，它變成輸入框。然後當你第二次點擊它時，它不會改變變量，並且不會恢復到非輸入框。我用多個js和jquery驗證器檢查了我的代碼，所以我不太確定爲什麼第二個點擊函數不起作用。

tl：dr：
我有一些JavaScript和jQuery代碼，沒有工作，幫助。
Jsfiddle

來源

2013-07-27 Noah Huppert

你似乎有一個邏輯問題。您必須在事件處理程序中測試click的值。你可能想這一點：

var click = 1; 
$('#examplePostButton').click(function() { 
    if (click == 1) { 
     $('#examplePostTitle').html('<input type="text" value="Post Title" size="10"/>'); 
     $('#examplePostContent').html('<input type="text" value="First 35 characters of  post........" size="20"/>'); 
     $('#examplePostTag').html('<select><option>Animation</option><option>Programing</option>  <option>Robotics</option><option>Other</option></select>'); 
     click = 2; 
    } else if (click == 2) { 
     $('#examplePostTitle').html('Post Title'); 
     $('#examplePostContent').html('First 35 characters of post........'); 
     $('#examplePostTag').html('Post Tag'); 
     click = 1; 
    } 
});

請注意您可能避免使用封閉使用全球click變量：只需綁定在第一次加載頁面

(function(){ 
    var click = 1; 
    $('#examplePostButton').click(function() { 
     ... rest of the code is identical 
    }); 
)();

來源

2013-07-27 15:07:39

YES的。舊的brainfart再次罷工。謝謝。 –

請注意，在這裏布爾似乎比整數更多。 –

[**下面是這個解決方案的一個小工具**]（http://jsfiddle.net/VDPFa/） - 你可能想考慮不把HTML放在字符串中 - 它會非常快速地混亂。 –

您的腳本代碼，然後一個「點擊」功能被綁定，你應該編輯下面：

var click = 1; 


$('#examplePostButton').click(function() { 
    if (click == 1) { 
     $('#examplePostTitle').html('<input type="text" value="Post Title" size="10"/>'); 
     $('#examplePostContent').html('<input type="text" value="First 35 charecters of post........" size="20" />'); 
     $('#examplePostTag').html('<select><option>Animation</option><option>Programing</option><option>Robotics</option><option>Other</option></select>'); 
     click = 2; 
    } else if (click == 2) { 
     $('#examplePostTitle').html('Post Title'); 
     $('#examplePostContent').html('First 35 charecters of post........'); 
     $('#examplePostTag').html('Post Tag'); 
     click = 1; 
    }  

});

來源

2013-07-27 15:12:33

它工作得很好！您發佈的代碼將在頁面加載時運行。但是它的編碼方式是將兩個事件處理程序附加到編輯單元。

第一個事件處理程序將更改單元格內容，第二個將會運行並將其右移回去。這一切都發生得如此之快，你看不到它。

上http://jsfiddle.net/NkeAx/3/看看我的修改：

$('#examplePostButton').click(function() { 
    if (click == 1) { 
     $('#examplePostTitle').html('<input type="text" value="Post Title" size="10"/>'); 
     $('#examplePostContent').html('<input type="text" value="First 35 charecters of post........" size="20" />'); 
     $('#examplePostTag').html('<select><option>Animation</option><option>Programing</option><option>Robotics</option><option>Other</option></select>'); 
     click = 2; 
    } else if (click == 2) { 
     $('#examplePostTitle').html('Post Title'); 
     $('#examplePostContent').html('First 35 charecters of post........'); 
     $('#examplePostTag').html('Post Tag'); 
     click = 1; 
    } 
});

你留下了一個事件處理程序，將做切換。

來源

2013-07-27 15:14:51 UweB

下面是解...

var click = 1; 
$('#examplePostButton').click(function(){ 
if (click == 1) { 


     $('#examplePostTitle').html('<input type="text" value="Post Title" size="10"/>'); 
     $('#examplePostContent').html('<input type="text" value="First 35 charecters of post........" size="20" />'); 
     $('#examplePostTag').html('<select><option>Animation</option><option>Programing</option><option>Robotics</option><option>Other</option></select>'); 
     click = 2; 
     return false; 

} 

if (click == 2) { 
     $('#examplePostTitle').html('Post Title'); 
     $('#examplePostContent').html('First 35 charecters of post........'); 
     $('#examplePostTag').html('Post Tag'); 
     click = 1; 
} 

});

看到鏈接

http://jsfiddle.net/NkeAx/4/

來源

2013-07-27 15:18:06 anand4tech

jQuery .html（）不能在if語句中工作

回答

相關問題