1

私のphpスクリプトは、その画像のチェックボックスが非表示になっている画像を配置します。画像をクリックすると、チェックボックスがオンになります。次に、画像の周囲にアウトラインを配置して、醜いチェックボックスを表示せずに画像が選択されていることを示します。これを行うために、出力された画像ごとにインクリメントして画像IDとして機能する$ iというphp変数を作成しました。次に、IDがJavascript関数に渡され、jqueryセレクターとして呼び出されます。

これはすべて正常に機能しますが、toggleClassイベントが呼び出されると、これまで経験したことのない方法で動作します。最初のクリックでは起動しませんが、2回目のクリックでは、チェックボックスのチェックと同期していない画像の強調表示が行われます。

画像>クリック=ハイライトなし|| チェックボックスがオンになっています。

画像>2回目のクリック=画像が強調表示されます|| チェックボックスがオフになっています。

addClassイベントが呼び出された場合、これが機能し、最初のクリックで強調表示されます。しかし、2回目のクリックで強調表示を削除するように書き直すと、元の問題が元に戻ります。（私は.hasClass（）でif elseステートメントを使用してこれを行いました。クラス'highlight'がそれを削除した場合、それ以外の場合はaddclassハイライト...）

HTMLとJSで変数を1に置き換えるだけで問題が発生するため、変数に問題はないようです。

私が使用しているコードをすぐに使用してください：

（この例では、php var $ iが1であるとしましょう。これは、この部分が正常に機能しているときにループなどを書き出すのは少し無意味に見えるためです。クリックすると、強調表示が可能になります。このコードはまだ記述されていないため、問題は発生していません。テストのためにhref =''を削除しました]）

HTML / PHP

// for this exmaple $i = 1;
// $id is the images unique id, the one used in the server for the image path


<a class='selectbox' id='hil' style='position:relative;' href='show-image.php?id=$id'>
    <div style='display:inline-block; padding:15px;' id=\"$i\" onclick=\"highlight('" . $i . "')\"  class='lifted drop-shadow-sq' >
        <label for=\"$id\">
            <img class='reflect reflect-br' width='150px;' height='150px' src=\"thumb.php?id=$id\">
        </label>
            <input id=\"$id\" style='display:non;' type='checkbox' class=\"show-man\" name='images[]' value='$id'>
    </div>
</a>

Jquery

function highlight(x) { 
id = x;
    $('#' + id).click(function() {
        $(this).toggleClass('highlight');
    });
}

CSS

.highlight img {
box-shadow:0 0 10px #5bb1ce;
}

事前の返信ありがとうございます。

4

2 に答える 2

1

関数はクリックイベントをdivhighlight()要素にバインドしています。したがって、最初のクリックでイベントがバインドされ、2番目のクリックで実際にコードが実行されます。2つの方法で変更できます

あなたはuisngonclick属性なので、ハイライト機能を次のように変更できます

function highlight(x) { 
  id = x;
  $('#' + id).toggleClass('highlight');
}

または、ページがこれでロードされた後、属性とバインドイベントを削除onclickします（すべてのdivがクラスを解除したと思います

$(document).ready(function(){
  $('.lifted').on('click', function(){
    $(this).toggleClass('highlight');
  });
});
于 2012-10-25T19:54:06.250 に答える
0

そうです、頭を掻いたり髪を引っ張ったりして数時間経った後、私は解決策にたどり着きました。チェックボックスをオンまたはオフにするために使用していたようですが、問題が発生していました。なぜかわからないのですか？

そこで、これを削除して、強調表示用の単純なJquery関数を作成しました。（ゼフィリヌスの功績を称えるために、これは彼の返事のわずかな修正です。）

$(document).ready(function(){
    $(".lifted").live('click', function() {
        $(this).toggleClass("highlight");
    });
});

次に、HTMLからタグを削除し、チェックボックスのIDにある画像の一意のIDを使用してJavaScript関数に置き換え、チェックボックスをオン/オフにしました。

<div style='display:inline-block; padding:15px;' id=\"$i\" onclick=\"if (event.target.tagName != 'INPUT') document.getElementById('$id').checked = !document.getElementById('$id').checked\"  class='lifted drop-shadow-sq' >
    <img class='reflect reflect-br' width='150px;' height='150px' src=\"thumb.php?id=$id\">
        <input id=\"$id\" style='display:none;' type='checkbox' class=\"show-man\" name='images[]' value='$id'>
</div>

cssは同じままでした。

すべてがソートされ、正常に機能しているように見えます。最後に、上記のヘルプを提供してくれたZefirynに感謝する必要があります。

于 2012-10-25T21:05:42.323 に答える