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

何らかの理由で、編集ボタンを 1 回クリックすると、入力ボックスに変わります。次に、もう一度クリックすると、変数は変更されず、非入力ボックスに戻りません。複数のjsおよびjqueryバリデーターでコードをチェックしたので、2番目のクリック機能が機能しない理由がよくわかりません。

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

最初にページがロードされたときにスクリプトコードがバインドされ、その後 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

それはうまくいっています！投稿したコードは、ページが読み込まれたときに実行されます。しかし、コーディング方法では、2 つのイベント ハンドラーが編集セルにアタッチされています。

最初のイベント ハンドラーはセルの内容を変更し、2 番目のイベント ハンドラーも同様に実行され、すぐに変更されます。そして、それはすべて目に見えない速さで起こっています。

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

トグルを行う 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 に答える