Jquery 替换<；ul>；举例说明

我在

元素中设置了数据集，以便在单击某个状态时显示该状态的数据。默认情况下，我希望有3列显示“选择状态”，当用户单击给定状态时，数据显示出来。其中一个问题是试图用另一个

类替换一个

类，而不更改所有3个类？我附带了一个JSFIDLE，您可以更清楚地看到我正在尝试做什么。我想单击一个状态，并让该

的内容填充其中一个默认列。出于显而易见的原因，

是一个类，它会更改该类的所有实例，但我想知道是否有办法改为更改一个实例

---

（）

看看这把小提琴：

除了文本，我已经删除了你专栏中的所有内容。我已经将您的数据包装在一个div中。现在我可以从一个div中获取html，并将其作为另一个div的html。包含数据的隐藏div仍然存在。我只是用它们来填充一个空的“选择一个状态”div

HTML:

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');
    });
});

---

不要试图通过将链接格式化为代码来欺骗系统。只需包含代码即可。我很抱歉，但从你的描述或你的小提琴来看，你根本不清楚你想做什么。您是否试图用状态数据替换“选择一个状态”的

？如果是这样，为什么要使用
作为“选择状态”呢。只需将其设置为div并将所选状态附加到div。然后向div添加一个类“filled”，这样您就知道它已插入状态数据。正确。不管是哪种方式，您不是还在向
注入数据吗？或者您是说添加一个div，其中的数据行由
分割？我只是认为列表将是一种更干净的方式来显示数据的语义。此外，这是最终产品的熊骨头版本。根据数据的不同，背景颜色会有所不同，因此我觉得将每个数据点放在一个列表项中是值得的。我更新了小提琴，以便更详细地显示它。如果选择纽约，我希望使用纽约数据替换“选择州”行中的1行。X'ing他们是一个完全不同的问题，但一旦我可以让他们替换默认列，我会处理这个问题。这很好-谢谢！我想更多地了解解决方案。我看到您正在向列中添加一类“.filled”，但没有与之关联的样式。有没有具体的原因？另外，为什么将列表放入div中会使进程更易于访问？仅仅替换
元素而不是将它们嵌套在div中会更难吗？无论哪种方式，解决方案似乎都有效。我将实现这一点，希望它能顺利工作。cheers在按钮单击处理程序上使用“filled”类，以便它选择尚未填充数据的列。如果单击“纽约”，它将用数据填充第一列。单击“乔治亚”，它将填充第二个。您不希望它覆盖第一列中的数据，因此必须找到一个空列。所以使用$（'.pick-a-state-column'）。而不是（'.filled'）[0]；获取未填充的第一列。将
放在div中有两件事。首先，我为每个按钮添加了一个ID，该ID与按钮中的值相匹配，这样就可以很容易地找到从中获取数据的正确div。但更重要的是。很容易获得div的$（div）.html（），它是整个
元素。然后将其用作列$（column.html（$（div.html（））的html；这是一个非常有用的解释。谢谢，没问题。如果你喜欢这个答案，请把它标为正确答案。谢谢

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; }

$(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');
    });
});