Question

如果您发布文章，我正在为网站制作管理屏幕。我已经做了这样一个表格包含帖子的所有值。

<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

Answer 1

您似乎遇到了逻辑问题。您必须在事件处理程序中测试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
    });
)();

Answer 2

您的脚本代码只是在第一次加载页面时绑定，然后一个＆＃34;单击＆＃34;函数被绑定，你应该编辑如下：

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

});

Answer 3

工作得很好！您发布的代码将在加载页面时运行。但是它的编码方式，它将两个事件处理程序附加到编辑单元格。

第一个事件处理程序将更改单元格内容，第二个事件处理程序也会运行并立即更改它。而这一切都发生得如此之快，你看不到它。

查看我对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;
    }
});

你剩下一个事件处理程序来进行切换。

Answer 4

这是解决方案......

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/

jQuery .html（）在if语句中不起作用

4 个答案: