1

如果您发布文章，我正在为网站制作管理屏幕。我已经做到了，所以一张表可以保存帖子的所有值。

<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 代码，不工作，帮助。
提琴手

4

4 回答 4

5

你好像逻辑有问题。您必须测试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-27T15:07:39.667 回答
1

您的脚本代码刚刚在第一次加载页面时绑定，然后绑定了一个“点击”功能，您应该编辑如下：

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-27T15:12:33.780 回答
0

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

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

查看我在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-27T15:14:51.277 回答
0

这是解决方案...

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-27T15:18:06.610 回答