Question

我正在使用jquery mobile并创建了2个页面，两个页面都有可点击的多个div。我只想一次选择一个div，所以如果选择了另一个div，则只能在活动页面上删除它所选择的类。此时它还会从第二页中删除所选的类。我尝试了多种方法，即拥有单独的类名等，但我无法让它发挥作用。最好的方法是什么？

     <section id="LevelStartPage" data-role="page" class="ui-page-theme-b">
    <article id="LevelStartContent" data-role="content" class="ui-content">

        <h3>Select Starting Level</h3>
        <div class="ui-grid-b">

            <div class="ui-block-a" style="width: 50%;">
                <div class='sprite style Black1'>1</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Black</div>
            </div>
            <div class="ui-block-b" style="width: 50%;">
                <div class='sprite style VeryDarkBrown2'>2</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Very Dark Brown</div>
            </div>
            <div class="ui-block-a" style="width: 50%;">
                <div class="sprite style DarkBrown3">3</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Dark Brown</div>
            </div>
            <div class="ui-block-b" style="width: 50%;">
                <div class="sprite style MediumBrown4">4</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Medium Brown</div>
            </div>
            <div class="ui-block-a" style="width: 50%;">
                <div class="sprite style LightBrown5">5</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Light Brown</div>
            </div>
            <div class="ui-block-b" style="width: 50%;">
                <div class="sprite style DarkBlonde6">6</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Dark Blonde</div>
            </div>
            <div class="ui-block-a" style="width: 50%;">
                <div class="sprite style MediumBlonde7">7</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Medium Blonde</div>
            </div>
            <div class="ui-block-b" style="width: 50%;">
                <div class="sprite style LightBlonde8">8</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Light Blonde</div>
            </div>
            <div class="ui-block-a" style="width: 50%;">
                <div class="sprite style VeryLightBlonde9">9</div>
                <div class="ui-block-a"></div>
                <div class="spritetext last">Very Light Blonde</div>
            </div>
            <div class="ui-block-b" style="width: 50%;">
                <div class="sprite style LightestBlonde10">10</div>
                <div class="ui-block-a"></div>
                <div class="spritetext last">Lightest Blonde</div>
            </div>
        </div>
        <a href="#LevelEndPage" class="ui-btn btn-rt ui-shadow ui-corner-all ui-icon-carat-r ui-btn-icon-notext">Next</a>
    </article>
</section>

<section id="LevelEndPage" data-role="page" class="ui-page-theme-b">

    <article id="LevelEndContent" data-role="content" class="ui-content">
        <h3>Select Ending Level</h3>
        <div class="ui-grid-b">
            <div class="ui-block-a" style="width: 50%;">
                <div class='sprite style Black1'>1</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Black</div>
            </div>
            <div class="ui-block-b" style="width: 50%;">
                <div class='sprite style VeryDarkBrown2'>2</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Very Dark Brown</div>
            </div>
            <div class="ui-block-a" style="width: 50%;">
                <div class="sprite style DarkBrown3">3</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Dark Brown</div>
            </div>
            <div class="ui-block-b" style="width: 50%;">
                <div class="sprite style MediumBrown4">4</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Medium Brown</div>
            </div>
            <div class="ui-block-a" style="width: 50%;">
                <div class="sprite style LightBrown5">5</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Light Brown</div>
            </div>
            <div class="ui-block-b" style="width: 50%;">
                <div class="sprite style DarkBlonde6">6</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Dark Blonde</div>
            </div>
            <div class="ui-block-a" style="width: 50%;">
                <div class="sprite style MediumBlonde7">7</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Medium Blonde</div>
            </div>
            <div class="ui-block-b" style="width: 50%;">
                <div class="sprite style LightBlonde8">8</div>
                <div class="ui-block-a"></div>
                <div class="spritetext">Light Blonde</div>
            </div>
            <div class="ui-block-a" style="width: 50%;">
                <div class="sprite style VeryLightBlonde9">9</div>
                <div class="ui-block-a"></div>
                <div class="spritetext last">Very Light Blonde</div>
            </div>
            <div class="ui-block-b" style="width: 50%;">
                <div class="sprite style LightestBlonde10">10</div>
                <div class="ui-block-a"></div>
                <div class="spritetext last">Lightest Blonde</div>
            </div>
        </div>
    </article>
</section>

$(document).ready(function () {
    $('.sprite.style, .spriteGray.style').on('click', function () {
        $('.sprite.style, .spriteGray.style').removeClass('selected')
        var $this = $(this);
        $this.toggleClass('selected');
    });
});

Answer 1

试试这个：

$(document).ready(function () {
    $('.sprite.style, .spriteGray.style').on('click', function () {
        $('.ui-page-active .sprite.style, .spriteGray.style').removeClass('selected')
        var $this = $(this);
        $this.toggleClass('selected');
    });
});

将.ui-page-active添加到选择器

Answer 2

每个块都需要单独的点击处理程序。在选择器中包含您的文章ID，以便它们特定于部分。

$(document).ready(function () {
    $('#LevelStartContent .sprite.style').on('click', function () {
        $('#LevelStartContent .sprite.style').removeClass('selected')
        var $this = $(this);
        $this.toggleClass('selected');
    });
    $('#LevelEndContent .sprite.style').on('click', function () {
        $('#LevelEndContent .sprite.style').removeClass('selected')
        var $this = $(this);
        $this.toggleClass('selected');
    });
});

jsFiddle示例 - http://jsfiddle.net/2VLMQ/

在同一个jquery移动页面中的多个项目上进行toggleclass

2 个答案: