php - Javascriptの要素IDをjQueryに変換するには?

Question

このスクリプトを jQuery に変換する方法がわかりません。JavaScript を助けてください

function show_t(id){
    document.getElementById("hide_t_"+id).style.visibility='visible';
}
function hide_t(id){
    document.getElementById("hide_t_"+id).style.visibility='hidden';
}

これは、上記のスクリプトを使用した php の div 要素です

    <div class='item' onMouseOver="show_t('$dataBB[0]')" 
onMouseOut="hide_t('$dataBB[0]')">

このスクリプトで変更すると問題が発生します

$("#show_t1"+id).mouseover(function(){
    document.getElementById("hide_t_"+id).style.visibility='visible';
}).mouseout(function(){
    document.getElementById("hide_t_"+id).style.visibility='hidden';
});

上記のスクリプトのdiv要素は

<div id="show_t$dataBB[0]">
<span id='hide_t_$dataBB[0]' class='hide_input'>
</span>
</div>

私が何を意味するかは、www.tumbasklik.comで確認できます。

score 4 · Accepted Answer

変化する

document.getElementById("hide_t_"+id).style.visibility='visible';

に

$("#hide_t_"+id).css('visibility','visible');

あなたのコードは次のようになります。

$("#show_t1"+id).mouseover(function(){       
    $("#hide_t_"+id).css('visibility','visible');
}).mouseout(function(){       
    $("#hide_t_"+id).css('visibility','hidden');
});

編集:IDを供給する代わりにワイルドカードを使用し、IDを生成する代わりにスパンのクラスを使用するようにセレクターを変更できます。

ライブデモ

$("[id^=show_t]").mouseover(function() {
    $(this).find('.hide_input').css('visibility', 'visible');
}).mouseout(function() {
    $(this).find('.hide_input').css('visibility', 'hidden');
});

score 2 · Accepted Answer

ステップバイステップ

divには必要onMouseOverとonMouseOut機能はありません.item。それらを削除します。valuesから渡す必要はありませんphp
スパンを意味のあるものにします。クラスhide_itemをすべてのスパンに配置するのではなく、クラスをとして配置しbuy-option hiddenます。すべてのスタイルを実行し.buy-option { /* Styles */ }て配置する.hidden { display: none; }

jQuery コードを次のように変更します。

jQuery(function($) {
    $('div.item').mouseover(function() {
        $(this).find('.buy-option').removeClass('hidden');
    })
    $('div.item').mouseout(function() {
        $(this).find('.buy-option').addClass('hidden');
    });
});

作業中のフィドルを確認し、それぞれの iframe (HTML、CSS、JS) からコードをコピーして貼り付けます
DOM トラバーサルから始める jQuery の学習を開始する

score 0 · Accepted Answer

$("#show_t1"+id).mouseover(function(){
    $("#hide_t_"+id).css('visibility','visible');
}).mouseout(function(){
    $("#hide_t_"+id).css('visibility','hidden');;
});

score 0 · Accepted Answer

Jqueryで -

$("#hide_t_"+id).hide();
$("#hide_t_"+id).show();

このようにしてみてください-

$("#show_t1"+id).mouseover(function(){
    $(this).show();
}).mouseout(function(){
    $(this).hide();
});

デモ

php - Javascriptの要素IDをjQueryに変換するには?

4 に答える 4

Related

Reference