使用 jQuery 浏览 <td>

Question

在这里@http://jsfiddle.net/DgPv6/2/用示例代码创建了小提琴

我有一张有 2 个<td>s 的表，第一个我有标题，第二个我有相关的相应项目，第一个总是显示，但第二个只会显示你所在的内容，例如 Country将显示国家列表，当您单击语言时，它将显示国家列表。

1. 这里的国家列表是复选框，语言是单选按钮。

2. 问题：

只有当第二个项目中的任何项目处于选定状态时，我才尝试将图像添加到相应的标题，无论是收音机还是使用 jquery 的复选框。

我尝试选择任何已选中的输入复选框，但没有成功。这里有什么建议，这里如何在两个 tds 之间解析？

$("input:checked").each(function() {
             $("div.lnk").append("<img class='tick'></img>");

            }); 

Answer 1

您的小提琴无法正常工作的原因有很多。

• 您使用的是 JQuery 语法，但您没有在 Frameworks and Selections 下选择 JQuery
• 您的 HTML 存在问题，标签未正确关闭
• 您发布的 javascript 只运行一次，也就是页面加载的时候。它所说的实际上是“当页面加载时，对于选中的每个复选框，为每个链接添加一个图像”，这不是你想要的。如果选择了任何链接，您只需要一张图片作为正确的链接。

我已经分叉了你的小提琴，并进行了一些更新，包括添加 JQuery 和稍微修复 html。它应该具有您需要的基本功能。

http://jsfiddle.net/GLquL/1/

也就是说，这里是相关的 HTML：

<table>
    <tbody>
        <tr>
            <td width="30%">
                <div id="lnCont">
                    <div id="Country" class="lnk">Country <span class="shown-image">selected</span></div>
                    <div id="language" class="lnk">language <span class="shown-image">selected</span></div>
                    <div id="food" class="lnk">food</div>
                    <div id="Color" class="lnk">Color</div>
                </div>
            </td>
            <td>
               <div id="b_country" class="hidden inputs">
                   <div class="aaa">
                       <input type="checkbox" class="grp" value="USA" name="USA" id="id1" />
                       <label class="lbl " title="USA " data-name="USA " for="id1">USA</label>
                   </div>
                   <div class="aaa">
                       <input type="checkbox" class="grp " value="china" name="china" id="id1 " />
                       <label class="lbl" title="china" data-name="china" for="id1 ">china</label>
                   </div>
                </div>
                <div class="hidden inputs">
                </div>
            </td>
        </tr>
    </tbody>
</table>

Javascript：

// Make it so when you click on Country, the appropriate inputs are shown
$("#Country").click(function() {
    $(".inputs").addClass("hidden");
    $("#b_country").removeClass("hidden");
});

// We want this function to run every time a checkbox is checked or unchecked inside #b_country
function checkCountries() {

    if ($("#b_country input:checked").length > 0) {
        // There's at least one checked checkbox!
        $("#Country").addClass("active");
    } else {
        // No checked checkboxes at all. Let's get rid of our image.
        $("#Country").removeClass("active");
    }
}
// Run it now. There may be inputs that are checked by default!
checkCountries();

// Now, run that function each time an input changes its value inside #b_country
$("#b_country input").change(checkCountries);

还有一些 CSS：

.hidden {display:none;}
.lnk {cursor:pointer;}
.lnk .shown-image {display:none;}
.lnk.active .shown-image {display:inline;}
#lnCont { width:130px;}

肯定可以对这个小提琴进行改进，但它应该不仅仅适用于您的情况，它还会为您提供一个起点。