用另一个替换 <ul> 实例

Question

我在<ul> 元素中设置了数据，用于在单击状态时显示状态数据。默认情况下，我希望有 3 列显示“选择一个状态”，当用户单击给定状态时，数据会显示出来。正在发挥作用的一个问题是尝试用另一个 <ul> 替换 <ul> 类而不更改所有 3 个？我附上了一个 JSFiddle，你可以更清楚地看到我想要做什么。我想单击一个状态并让 <ul> 的内容填充默认列之一。出于显而易见的原因，<ul> 是一个类，它会更改该类的所有实例，但我想知道是否有办法改为更改 1 个实例？

(http://jsfiddle.net/5xyrv1w1/)

Answer 1

看看这个小提琴：http://jsfiddle.net/5xyrv1w1/2/

我已从您的列中删除了所有内容，但您的文字除外。我已将您的数据包装在一个 div 中。现在我可以从一个 div 中获取 html 并使其成为另一个 div 的 html。带有数据的隐藏 div 仍然存在。我只是用它们来填充一个空的“选择一个州”div。

HTML：

<button class="NY">New York</button>
<button class="GA">Georgia</button>
<button class="FL">Florida</button>


            <div id="state-columns-container">
                <div class="pick-a-state-column" data-value="Choose a state">
                    Choose a state
                </div>

                <div class="pick-a-state-column" data-value="Choose a state">
                    Choose a state
                </div>

                <div class="pick-a-state-column" data-value="Choose a state">
                    Choose a state
                </div>


                <div id="NY" class="state-data">
                    <ul id="NY-state-column" data-value="newyork">
                        <li class="state-title-chosen univers-bold">
                            <span class="close-state">X</span>New York
                        </li>
                        <li>Some data</li>
                        <li>More data</li>
                        <li>A bit more</li>
                        <li>Last data</li>
                    </ul>
                </div>

                <div id="GA" class="state-data">
                    <ul id="GA-state-column" data-value="georgia">
                        <li class="state-title-chosen univers-bold">
                            <span class="close-state">X</span>Georgia
                        </li>
                        <li>Some data</li>
                        <li>More data</li>
                        <li>A bit more</li>
                        <li>Last data</li>
                    </ul>
                </div>

                <div id="FL" class="state-data">
                    <ul id="FL-state-column" data-value="florida">
                        <li class="state-title-chosen univers-bold">
                            <span class="close-state">X</span>Florida
                        </li>
                        <li>Some data</li>
                        <li>More data</li>
                        <li>A bit more</li>
                        <li>Last data</li>
                    </ul>
                </div>
            </div>

CSS：

ul {
    list-style-type: none;
}
#state-columns-container { 
    padding: 30px;    
}

.pick-a-state-column {
  width: 200px;
  float: left;
  text-align: center;
}

.pick-a-state-column ul { position: relative; }

.close-state {
  position: absolute;
  top: 7px;
  right: 7px;;
  cursor: pointer;
}

.state-data { display: none; }

jQuery:

$(function(){
    $('button').click(function() {
        var $className = $(this).attr('class');
        var emptyCol = $('.pick-a-state-column').not('.filled')[0];
        if(emptyCol){
            $(emptyCol).html($('#' + $className).html());
            $(emptyCol).addClass('filled');
        }
    });

    $(document).on('click', '.close-state', function() {
        var $col = $(this).closest('.pick-a-state-column');
        $col.html($col.data('value'));
        $col.removeClass('filled');
    });
});