Question

我在<ul>个元素中设置数据，以显示点击状态时的数据。默认情况下，Id喜欢有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');
    });
});

将<ul>实例替换为另一个实例

1 个答案: