使用 jQuery 显示/隐藏切换

Question

在我的示例中，我尝试选择一个值并显示所选文本"值#已选择"。这有效，但是，我需要在单击"选择我"后显示的"重置"链接后重新显示以前的元素......

这是我的小提琴：http://jsfiddle.net/samjco/wG8qf/566/

.HTML：

<table id="main" border="1">
<tr>
<td class="value-entity">
<div>Value 1 <a href="#" class="chooseme" data-value="Value 1">Choose Me</a></div>
<div>Value 2 <a href="#" class="chooseme" data-value="Value 2">Choose Me</a></div>
</td>
<td class="sel-value"></td>
</tr>
<tr>
<td>Something Unrelated</td>
</tr>
<tr>
<td class="value-entity">
<div>Value 3 <a href="#" class="chooseme" data-value="Value 3">Choose Me</a></div>
</td>
<td class="sel-value"></td>
</tr>
<tr>
<td>Something else Unrelated</td>
</tr>
</table>

.JS

$(function() {
$("#main").on({
'click': function(event) {
event.preventDefault();
var Data = $(this).attr('data-value');
var Value = '<div class="sel-value-text">'+ Data +' was selected </div><a href="#" class="show-value-entity">Reset</a>';
$(this).closest("td.value-entity").nextUntil("td.value-entity").show().html(Value);
$(this).parents("td.value-entity").hide();
//alert($(this).attr('data-value'));
console.log($(this).attr('data-value'));
}
},
"a.chooseme", null);
});

.CSS

td.sel-value {
display: none;
}

Answer 1

只需在同一点击事件中添加重置代码即可。并从点击事件选择器中删除选择我。

$("#main").on({
'click': function(event) {
...
...
}
},
"a", null);  

下面是片段

$(function() {
$("#main").on({
'click': function(event) {
event.preventDefault();
if($(this).hasClass("chooseme")){
var Data = $(this).attr('data-value');
var Value = '<div class="sel-value-text">'+ Data +' was selected </div><a href="#" class="show-value-entity reset">Reset</a>';

$(this).closest("td.value-entity").nextUntil("td.value-entity").show().html(Value);
$(this).parents("td.value-entity").hide();
console.log($(this).attr('data-value'));
}else{
	event.preventDefault();

$(this).parents("td.sel-value").parent().find(".value-entity").show();
$(this).parents("td.sel-value").hide();
}
}
},
"a", null);

});

td.sel-value {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main" border="1">
<tr>
<td class="value-entity">
<div>Value 1 <a href="#" class="chooseme" data-value="Value 1">Choose Me</a></div>
<div>Value 2 <a href="#" class="chooseme" data-value="Value 2">Choose Me</a></div>
</td>
<td class="sel-value"></td>
</tr>

<tr>
<td>Something Unrelated</td>
</tr>

<tr>
<td class="value-entity">
<div>Value 3 <a href="#" class="chooseme" data-value="Value 3">Choose Me</a></div>
</td>
<td class="sel-value"></td>
</tr>

<tr>
<td>Something else Unrelated</td>
</tr>

</table>

你也可以在JSFiddle上测试它。

http://jsfiddle.net/nimittshah/wG8qf/591/

谢谢--