Question

希望有人可以帮助我，我将会遇到一个小问题。我做了很多故障排除，并且咨询了Google无济于事。

我有一系列链接，点击时会触发两个事件：

a）更改链接上的类（完美运行）。 b）改变大约10个div的类（部分工作）。

浮动的div由循环生成，并输出到链接的右侧。

我正在努力的是一个干净的Javascript，它将同时更改链接和div上的类。我正在使用以下内容：

$(document).ready(function() {
$("#row1_label").click(function() { $("#row1_label, #row1_cell*").toggleClass("active"); });
});

当我想在少量元素上更改类但这远远不可扩展时，这很有效。

有人可以建议我可以让Javascript将'*'作为通配符重新识别，并根据行ID更改类吗？基本上......点击后，任何以'row1'开头的链接或div都会获得 THIS 类。

谢谢！

RRfive

抱歉，忘了包含HTML。

<div class="leftColumn">
            <div class="logo"><a href="index.php"><img src="images/img_logo.png" width="95" height="66" alt="Two Skinny Men"></a></div>
            <div class="leftContent">
                <h3>Client:</h3>
                <h2>Client</h2>
            </div>
            <?php include("includes/inc_key.php"); ?>
            <div class="rowLabel">
                <a href="javascript: void(0)" id="row1_label"><div class="cellInner"><div class="cellCentre">Active Users<br /><span>(Forecast)</span></div></div></a>
                <a href="javascript: void(0)" id="2"><div class="cellInner"><div class="cellCentre">App &amp; Product Releases</div></div></a>
                <a href="javascript: void(0)" id="3"><div class="cellInner"><div class="cellCentre">Resource Plan</div></div></a>
                <a href="javascript: void(0)" id="4"><div class="cellInner"><div class="cellCentre">Ecosystem releases</div></div></a>
                <a href="javascript: void(0)" id="5"><div class="cellInner"><div class="cellCentre">Project Milestones</div></div></a>
                <a href="javascript: void(0)" id="6"><div class="cellInner"><div class="cellCentre">Savings Forecast<br ><span>(Time/Cost)</span></div></div></a>
            </div>
            <div class="copyright"><span>&copy;</span> <?php echo date("Y"); ?> Two Skinny Men</div>

        </div>

        <div id="main">
            <div class="container1">
                <div id="slider">
                    <?php             
                        $result = mysql_query("SELECT * FROM strategy_monthData");
                        while($row = mysql_fetch_array($result)) {
                        echo "<div class=\"month\">
                            <div class=\"inner\">
                            <div class=\"graph\"></div>
                                <h4>" . $row['title'] . "</h4>
                                <div class=\"row\" id=\"row1_" . $row['monthID'] . "\"><div class=\"rowInner\"><div class=\"rowCentre\">" . number_format($row[row_users], 0, '.', ',') . "</div></div></div>
                            </div>
                            <div class=\"clearer\"></div>
                        </div>"; }
                    ?>
                </div>
                <div class="clearer"></div>
            </div>
        </div>

Answer 1

您可以使用starts with选择器。

试试这个：

$(document).ready(function() {
    $("#row1_label").click(function() { 
        $("[id^='row1'").toggleClass("active"); 
    });
});

在onLlick上更改多个元素的类（JavaScript）

1 个答案: