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看到我的意思

Answer 1

改变

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，并使用 span 类而不是生成 id。

现场演示

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

Answer 2

一步步

1. div中不需要onMouseOver和onMouseOut功能。.item删除它们。无需values从php

2. 使您的跨度有意义 - 而不是将类放在hide_item所有跨度上，而是将类作为buy-option hidden. 做所有的风格.buy-option { /* Styles */ }，把.hidden { display: none; }

3. 仅将 jQuery 代码更改为：

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

4. 检查工作小提琴并从相应的 iframe（HTML、CSS、JS）复制粘贴代码

5. 从DOM遍历开始学习jQuery

Answer 3

使用 Jquery -

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

试试这样-

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

演示

Answer 4

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