jQuery制作带有多个参数的div标签如何在里面使用Quotes

时间:2014-01-15 20:23:07

标签: jquery html quotes

如果我的内部带有单引号,则显示F3-R06,但移动和鼠标移除不起作用。 如果我从jQuery中取出它可以正常工作,但是如何在其中使用引号却什么都不做。 我在“”里面需要什么样的报价? 我试过“”这个“”但是没有任何作用

<script type="text/javascript">
$(function drawdiv()
    {
        $("<div onmouseover="mOver(this,'Fred Flintstone')"  onmouseout="mOut(this,'F3-R06')" style='background-color:#D94A38;width:30px;height:30px;padding:20px'>F3-R06</div>").appendTo("body"); 
    })
</script>
<script>

function mOver(obj,name)
    {
        obj.innerHTML=name
    }

function mOut(obj,room)
    {
        obj.innerHTML=room
    }
</script>

1 个答案:

答案 0 :(得分:1)

你有两个单独的引号问题。一个是jQuery选择器引号,另一个是div的js属性中的引号。

首先,按照惯例,考虑在jQuery选择器中使用单引号,以便您可以根据HTML属性等的需要使用双引号。

$('<div id="this-is-fine"></div>').blah();

其次,当 在选择器中有两个以上的引号类型时,可以用反斜杠(\)转义它们。

$('<div onmouseover="mOver(this,\'Fred Flintstone\')"  onmouseout="mOut(this,\'F3-R06\')" style="background-color:#D94A38;width:30px;height:30px;padding:20px">F3-R06</div>').appendTo('body');

第三,也许可以考虑多喝一点jQuery Kool-Aid。

jQuery('<div>F3-R06</div>')
    .attr('onmouseover', 'mOver(this, "Fred")')
    .attr('onmouseout', 'mOver(this, "F3-R06")')
    .css({ 
        'background-color' : '#D94A38', 
        'width' : '30px',
        'height' : '30px',
        'padding' : '20px'
        })
    .appendTo('body');

稍微多一点的kool-aid让你来到这里:

$('<div data-alt-text="Fred">F3-R06</div>')
    .hover(function (){ //first is mouseenter
        altText($(this));
    },
    function () { // second is mouseleave
        altText($(this)); 
    })
    .addClass('f3-box') // css is handy.
    .appendTo('body');

function altText ($obj){
    var text = $obj.text();
    // wang dang and reverse it - ms elliot
    $obj.text( $obj.attr('data-alt-text') );
    $obj.attr('data-alt-text', text )
}    

<style>
    .f3-box{
        background-color: #D94A38, 
        width: 30px,
        height: 30px,
        padding: 20px
    }
</style>

更多关于.hover() in the jquery docs