0

<a>動的IDで整理した要素（タグ内の画像）リストがあります。そのうちの1つだけを選択することが可能です。任意の要素を選択するとします。今回は、スタイルを変更し、「SelectedItem」の値をそのname属性に設定して、将来選択されたアイテムを検索します。選択したアイテムの上にマウスを置くと、そのsrc値を変更したいのですが、javascriptでname = "SelectedItem"属性を設定したため、jquery関数は機能しません。実行時に、ページをリロードした後に機能します。コードにname="SelectedItem"を設定すると（デフォルト、実行前）、機能します。しかし、私はページをリロードせずにそれをやりたいです。

ここに画像の説明を入力してください

すぐに、選択操作を行うときに、name="SelectedItem"を選択した画像に設定します。

function SelectItem(id) {
var imgId = 'productImage_' + id;
var imgId_element = document.getElementById(imgId.toString());

//my some operations

imgId_element.name = "SelectedItem";
}

また、選択解除時に名前の値を取得します。

function UnSelectItem(id) {
var imgId = 'productImage_' + id;
var imgId_element = document.getElementById(imgId.toString());

//my some operations

imgId_element.name = "";
}

選択解除した画像を、選択した画像のみの背景に設定したい。以下Select/Unselect の項目が動作しない場合。SelectItem()/UnSelectItem()mouseover()/mouseout()

$("img[name='SelectedItem']").mouseover(function () {
            $(this).attr("src", "/Content/images/select.png");
        }).mouseout(function () {
            $(this).attr("src", "/Content/images/unselect.png");
});

HTMLは次のとおりです。

<img src="@Url.Content("~/Content/images/select.png")" id='productImage_@(Model.Id)'  data-id='@Model.Id'  @{if (Model.IsSelected) { <text>name="SelectedItem"</text>} }  alt="" />

どうすればこの問題を解決できますか？

4

1 に答える 1

4

試す：

$('body').on('mouseover', 'img[name=SelectedItem]', function() {
  this.src = "/Content/images/select.png";
}).on('mouseout', 'img[name=SelectedItem]', function() {
  this.src = "/Content/images/unselect.png";
});

の3引数バリアントを使用して、要素に委任ハンドラー.on()を設定します。マウスイベントがそれにバブルアップすると、ハンドラーはセレクターに対してターゲット要素をチェックします。<body>

とはいえ、要素に「name」プロパティ/属性を使用する<img>ことはあまり意味がありません。これは有効な属性ではありません。クラス値を追加/削除したほうがよいでしょう。

function SelectItem(id) {
  $('#productImage' + id).addClass('SelectedItem');
}

その後：

$('body').on('mouseover', '.SelectedItem', function() { ... })

最後に、合成の「mouseenter」イベントと「mouseleave」イベントを使用する方がよいでしょう。これらはブラウザの奇妙な点を乗り越えるためです。

于 2013-01-19T16:48:34.450 に答える