Question

我对jQuery很新（就像迄今为止的几天经历），所以我可能会问一个相当愚蠢的问题：

我遇到了jQueryUI的问题。可选，我想在右侧列出四个不同的标签，而点击每个标签时左侧会出现不同的图像/文字内容。每次我点击不同的标签时，我都需要它来添加新内容，同时从上一个标签中删除所有内容（如果单击了一个）。我的问题是，当我需要它来清除其他预先存在的内容并添加新内容时，它会不断地将类，按钮和文本相互添加。此外，首次运行时，默认选项卡为顶部，因此顶部内容也应显示...

以下是我想要实现的目标： http://puu.sh/gELQi/211165f55a.png

JSFiddle：http://jsfiddle.net/p5gsby49/8/

以下是我希望添加到每个标签的代码，前三行是单击每个标签时要添加的内容，如果他们点击另一个标签页则会删除。

$(".elementOneInfo").addClass("imageClassOne"),
$(".elementOneInfo").append("<button><a href='/clans'>MORE</a></button>");
$(".elementOneInfo").append("<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, vitae possimus. Quis debitis harum fugiat, placeat, modi nesciunt temporibus. Nesciunt rem necessitatibus, commodi harum a beatae amet consectetur. Porro, quis!</p>");

$(".elementTwoInfo").addClass("imageClassTwo"),
[...]

然后我有了Selectable jQueryUI本身：

$('#elements').selectable();

我试图使用if语句，例如：

if ($('#elements .elementOne').hasClass('ui-selected')) {
    $(".elementOneInfo").addClass("imageClassOne"),
    [...]
}

＆安培;这是我的HTML

<div class="container elements-wrapper">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-7 elements-info">
                <div class="elementOneInfo"></div>
                <div class="elementTwoInfo"></div>
                <div class="elementThreeInfo"></div>
                <div class="elementFourInfo"></div>
            </div>
            <div class="col-md-5 elements-titles-wrapper">
                <ul id="elements">
                    <li class="elementOne light ui-widget-content"><h3>Title1</h3></li>
                    <li class="elementTwo dark ui-widget-content"><h3>Title2</h3></li>
                    <li class="elementThree light ui-widget-content"><h3>Title3</h3></li>
                    <li class="elementFour dark ui-widget-content"><h3>Title4</h3></li>
                </ul>
            </div>
        </div>
    </div>
</div>

感谢阅读，我希望有人能够告诉我如何实现这一目标，我已经能够添加我用一个标签发送的视觉图像的外观和感觉，但是一旦我添加将标签切换到混音中它只是不起作用。

Answer 1

尝试

$(document).ready(function () {    
    var text = "Lorem ipsum dolor sit amet,"
               + " consectetur adipisicing elit. Cumque, vitae possimus."         + " Quis debitis harum fugiat, placeat,"
               + " modi nesciunt temporibus. Nesciunt rem necessitatibus,"
               + " commodi harum a beatae amet consectetur. Porro, quis!";

    $('#server-titles li:first').addClass('ui-selected');

    var $one = $('.server-one');
    var $two = $('.server-two');
    var $three = $('.server-three');
    var $four = $('.server-four');

    $('#server-titles').selectable({
        selected: function (event, ui) {
            console.log(event, ui);
            if ($('#server-titles .server-one').hasClass('ui-selected')) {
                $(".server-one-info").addClass("server-one-info-image");
                $(".server-one-info")
                .append("<button><a href='/clans'>MORE</a></button>");
                $(".server-one-info").append("<p>"+text+"</p>");
            }
            if ($('#server-titles .server-two').hasClass('ui-selected')) {
                $(".server-one-info").addClass("server-one-info-image");
                $(".server-one-info")
                .append("<button><a href='/clans'>MORE</a></button>");
                $(".server-one-info").append("<p>"+text+"</p>");
            }

            if ($('#server-titles .server-three').hasClass('ui-selected')) {
                $(".server-one-info").addClass("server-one-info-image");
                $(".server-one-info")
                .append("<button><a href='/clans'>MORE</a></button>");
                $(".server-one-info").append("<p>"+text+"</p>");
            }

            if ($('#server-titles .server-four').hasClass('ui-selected')) {
                $(".server-one-info").addClass("server-one-info-image");
                $(".server-one-info")
                .append("<button><a href='/clans'>MORE</a></button>");
                $(".server-one-info").append("<p>"+text+"</p>");
            }
        }
    });
});

jsfiddle http://jsfiddle.net/p5gsby49/3/

jQueryUI可选（如果元素hasClass ui-selected）不工作？

1 个答案: