1

我想拥有许多“infoItem”元素，每个元素都有自己的 jQuery 来管理它们。谁能告诉我为什么当我调用“displayText()”时，该函数中的元素不是包含点击处理程序的元素中的元素，而是页面上的最后一个元素？

在此处输入图像描述

<html>
    <head>
        <script type="text/javascript" src="systemJavascript/jquery-1.8.3.min.js"></script>
    </head>
    <body>
        <div class="infoItem">
            <div class="menu">
                <span class="menuOne">one</span>
                <span class="menuTwo">two</span>
            </div>
            <div class="content">intro message</div>
        </div>
        <div class="infoItem">
            <div class="menu">
                <span class="menuOne">eins</span>
                <span class="menuTwo">zwei</span>
            </div>
            <div class="content">Introtext</div>
        </div>
    </body>

</html>
<script type="text/javascript">

    var INFOITEM = INFOITEM || {};

    INFOITEM.initialize = function(infoItem) {
        var elemMenuOne;
        var elemMenuTwo;
        var elemContent;

        this.defineVariables = function() {
            elemMenuOne = infoItem.find('.menuOne');
            elemMenuTwo = infoItem.find('.menuTwo');            
            elemContent = infoItem.find('.content');            
        }

        this.decorateElements = function() {
            elemMenuOne.css('background-color', 'beige');
            this.decorateAsLink(elemMenuOne);
            elemMenuTwo.css('background-color', 'beige');
            this.decorateAsLink(elemMenuTwo);
        }

        this.functionalizeElements = function() {
            that = this;
            elemMenuOne.click(function(e) {
                that.displayText('ONE');
            });
            elemMenuTwo.click(function(e) {
                that.displayText('TWO');
            });
        }

        this.displayText = function(text) {
            elemContent.html('you selected ' + text);
        }

        this.decorateAsLink = function(elem) {
            elem.css({
                'cursor' :'pointer',
                'text-decoration' : 'underline',
                'font-weight' : 'normal'
            });
        }

        this.defineVariables();
        this.decorateElements();
        this.functionalizeElements();
    }


    $('.infoItem').each(function(){
        INFOITEM.initialize($(this));
    });

</script>
4

2 回答 2

3

INFOITEM是一个全局变量，因此您要为页面中的每个项目重置它，因此它始终指向最后一个元素：

$('.infoItem').each(function(){
        INFOITEM.initialize($(this));
    });

您最好将其滚动到 Jquery pluin 类型结构中，然后将其绑定到一个元素并传入相关元素。

这是一个让您入门的样板：

http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/

于 2013-01-28T15:21:57.047 回答
0

我解决这个问题的方法是为每个元素添加一个 ID，然后在点击事件中再次获取该项目，然后我可以将其传递给我可以适当操作它的任何方法，而不是内部变量。

   <html>
    <head>
        <script type="text/javascript" src="systemJavascript/jquery-1.8.3.min.js"></script>
    </head>
    <body>
        <div id="infoItem_123" class="infoItem">
            <div class="menu">
                <span class="menuOne">one</span>
                <span class="menuTwo">two</span>
            </div>
            <div class="content">intro message</div>
            <div class="contentOne">you clicked one</div>
            <div class="contentTwo">you clicked two</div>
        </div>
        <div id="infoItem_456" class="infoItem">
            <div class="menu">
                <span class="menuOne">eins</span>
                <span class="menuTwo">zwei</span>
            </div>
            <div class="content">Introtext</div>
            <div class="contentOne">du hast auf eins geklickt</div>
            <div class="contentTwo">du hast auf zwei geklickt</div>
        </div>
    </body>

</html>
<script type="text/javascript">

    var INFOITEM = INFOITEM || {};

    INFOITEM.initialize = function(infoItem) {
        var elemMenuOne;
        var elemMenuTwo;
        var elemContent;
        var elemContentOne;
        var elemContentTwo;
        var itemId;

        this.defineVariables = function() {
            elemMenuOne = infoItem.find('.menuOne');
            elemMenuTwo = infoItem.find('.menuTwo');            
            elemContent = infoItem.find('.content');            
            elemContentOne = infoItem.find('.contentOne');            
            elemContentTwo = infoItem.find('.contentTwo');            
            itemId = infoItem.attr('id');
        }

        this.decorateElements = function() {
            elemMenuOne.css('background-color', 'beige');
            this.decorateAsLink(elemMenuOne);
            elemMenuTwo.css('background-color', 'beige');
            this.decorateAsLink(elemMenuTwo);
            elemContentOne.hide();
            elemContentTwo.hide();
        }

        this.functionalizeElements = function() {
            that = this;
            elemMenuOne.click(function(e) {
                that.displayText($('#'+itemId), elemContentOne.html());
            });
            elemMenuTwo.click(function(e) {
                that.displayText($('#'+itemId), elemContentTwo.html());
            });
        }

        this.displayText = function(clickedInfoItem, text) {
            clickedInfoItem.find('.content').html(text);
        }

        this.decorateAsLink = function(elem) {
            elem.css({
                'cursor' :'pointer',
                'text-decoration' : 'underline',
                'font-weight' : 'normal'
            });
        }

        this.defineVariables();
        this.decorateElements();
        this.functionalizeElements();
    }


    $('.infoItem').each(function(){
        INFOITEM.initialize($(this));
    });

</script>
于 2013-01-30T15:18:01.810 回答