Question

下面我的jQuery代码不是很可重用。正如您在文档中看到的那样，我没有直接从父级获取rel属性值（不知道如何）。相反，我必须具体说明我从哪个父母那里获取价值。任何帮助表示赞赏。

以下是我刚刚设置的jsfiddle的链接：http://jsfiddle.net/RXb5K/

        function keyToolTip() {
            $('.educoreres_key').mouseover(function () {
                $(this).find('.keytooltip').stop(true, true).fadeIn(300);
            });
            $('.educoreres_key').mouseout(function() {
                $(this).find('.keytooltip').fadeOut(500);
            });

            return false;
        };

        $(document).ready(function () {
            $('.educoreres_key').append('<div class="keyimg"></div><div class="keytooltip"><div class="keytooltiparrow"></div><div class="keytooltipinside"></div><div class="clear"></div></div>');

            $('.webresource .keytooltipinside').append($('.educoreres_key.webresource').attr('rel'));
            $('.pdfdocument .keytooltipinside').append($('.educoreres_key.pdfdocument').attr('rel'));
            $('.worddocument .keytooltipinside').append($('.educoreres_key.worddocument').attr('rel'));
            $('.videoresource .keytooltipinside').append($('.educoreres_key.videoresource').attr('rel'));
            $('.webinarresource .keytooltipinside').append($('.educoreres_key.webinarresource').attr('rel'));
            $('.powerpointresource .keytooltipinside').append($('.educoreres_key.powerpointresource').attr('rel'));

            keyToolTip();
        });

HTML：

        <div class="eduresourceskeys">
            <div class="educoreres_key_label">Resources Key:</div>

            <div class="educoreres_key webresource" rel="Web Resource"></div>
            <div class="educoreres_key pdfdocument" rel="PDF Document"></div>
            <div class="educoreres_key worddocument" rel="Word Document"></div>
            <div class="educoreres_key videoresource" rel="Video Resource"></div>
            <div class="educoreres_key webinarresource" rel="Webinar Resource"></div>
            <div class="educoreres_key powerpointresource" rel="PowerPoint Resource"></div>

            <div class="clear"></div>
        </div>

CSS：

div.eduresourceskeys {
margin: 15px 0 0 45px;
}
div.educoreres_key_label {
    margin: 0 10px 0 0;
    float: left;
    color: #414141;
    font-family: 'HelveticaLTStdRegular', Helvetica, Arial, Sans-serif;
    font-size: 13px;
    line-height: 32px;
    }
div.educoreres_key {
    position: relative;
    margin: 0 8px 0 0;
    float: left;
    width: 43px;
    height: 34px;
    cursor: pointer;
    }
    div.educoreres_key.webresource {}
    div.educoreres_key.pdfdocument {}
    div.educoreres_key.worddocument {}
    div.educoreres_key.videoresource {}
    div.educoreres_key.webinarresource {}
    div.educoreres_key.powerpointresource {}

        div.educoreres_key div.keyimg {
            width: 43px;
            height: 34px;
            }

        div.educoreres_key.webresource div.keyimg           { background: url("../img/icon_media_html_page.png") 0 0 no-repeat; }
        div.educoreres_key.pdfdocument div.keyimg           { background: url("../img/icon_media_pdf.png") 0 0 no-repeat; }
        div.educoreres_key.worddocument div.keyimg          { background: url("../img/icon_media_word_doc.png") 0 0 no-repeat; }
        div.educoreres_key.videoresource div.keyimg         { background: url("../img/icon_media_video.png") 0 0 no-repeat; }
        div.educoreres_key.webinarresource div.keyimg       { background: url("../img/icon_media_html_page.png") 0 0 no-repeat; }
        div.educoreres_key.powerpointresource div.keyimg    { background: url("../img/icon_media_powerpoint.png") 0 0 no-repeat; }

    div.keytooltip {
        position: absolute;
        top: 40px;
        left: 50%;
        z-index: 20;
        margin: 0 0 0 -72px;
        display: none;
        width: 140px;
        border: 2px solid #1e5a7a;
        background-color: #fff;
        background-color: rgba(255, 255, 255, 0.95);

        -webkit-border-radius:  4px;
        -moz-border-radius:     4px;
        border-radius:          4px;
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.20);
        -moz-box-shadow:    0 0 8px rgba(0, 0, 0, 0.20);
        box-shadow:         0 0 8px rgba(0, 0, 0, 0.20);
        }
        div.keytooltipinside {
            position: relative;
            padding: 10px;
            color: #131313;
            font-size: 11px;
            line-height: 14px;
            text-align: center;
            }
            div.keytooltiparrow {
                position: absolute;
                top: -10px;
                left: 50%;
                margin: 0 0 0 -10px;
                width: 20px;
                height: 10px;
                background: url("../img/tooltip_arrow.png") 0 0 no-repeat;
                }

Answer 1

如果你想转到父元素并使用它的属性，我可能建议你定位你想要的元素，转到父元素并使用如下属性：

$(<selector>).parent().attr('rel');

.parent()上的文档可以是found here

Answer 2

我采取的方法是错误的。相反，我必须使用

$('parent item').each(function(){});

我在原帖中替换了以下内容：

        $('.webresource .keytooltipinside').append($('.educoreres_key.webresource').attr('rel'));
        $('.pdfdocument .keytooltipinside').append($('.educoreres_key.pdfdocument').attr('rel'));
        $('.worddocument .keytooltipinside').append($('.educoreres_key.worddocument').attr('rel'));
        $('.videoresource .keytooltipinside').append($('.educoreres_key.videoresource').attr('rel'));
        $('.webinarresource .keytooltipinside').append($('.educoreres_key.webinarresource').attr('rel'));
        $('.powerpointresource .keytooltipinside').append($('.educoreres_key.powerpointresource').attr('rel'));

使用：

        $('.educoreres_key').each(function(){
            $(this).find('.keytooltipinside').append($(this).attr('rel'));
        });

如果有人对此感兴趣，我将上面的jQuery转换为可用的插件。插件很简单，但它可以解决问题。与此插件一起，您可以使用OP中列出的标记和CSS。该插件非常简单，但它可以很好地满足我的需求。感谢

    // Tooltip Plugin
    (function ($) {
        $.fn.keyTip = function () {

            $(this).mouseover(function () {
                $(this).find('.keytooltip').stop(true, true).fadeIn(300);
            });

            $(this).mouseout(function () {
                $(this).find('.keytooltip').fadeOut(500);
            });

            // Tooltip
            $(this).append('<div class="keyimg"></div><div class="keytooltip"><div class="keytooltiparrow"></div><div class="keytooltipinside"></div><div class="clear"></div></div>');

            $(this).each(function () {
                $(this).find('.keytooltipinside').append($(this).attr('rel'));
            });

        };
    })(jQuery);

如何修改我的jQuery以便使用父的rel属性？

2 个答案: