javascript - jQueryUI Selectable(如果元素 hasClass ui-selected)不起作用？

Question

我对 jQuery 相当陌生(到目前为止已经有几天的经验了)，所以我可能会问一个相当愚蠢的问题:

我在使用 jQueryUI 的 .selectable 时遇到了一些问题，我希望在右侧有一个包含四个不同选项卡的列表，而单击每个选项卡时，左侧会出现不同的图像/文本内容。每次我单击不同的选项卡时，我都需要它添加新内容，同时删除上一个选项卡中的所有内容(如果单击了某个选项卡)。我的问题是，当我需要它来清除其他预先存在的内容并添加新内容时，它会不断地添加类、按钮和文本。此外，当第一次运行时，默认选项卡位于顶部，因此顶部内容也应该显示...

以下是我想要实现的目标的直观外观: 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/