1

それぞれがそれらを管理する独自のjQueryを持つ多数の「infoItem」要素が必要です。「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 型の構造にまとめてから、それを 1 つの要素にバインドし、関連付けられた要素を渡す方がよいでしょう。

始めるためのボイラープレートは次のとおりです。

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 に答える