Question

Here’s hoping someone can give me a hand will a small JavaScript issue I’m having. I’ve done a fair bit of troubleshooting and consulting Google to no avail.

I have a series of links that when clicked trigger two events:

a) Change the class on the link (works perfectly).
b) Change the class on around 10 divs (works partially).

The floated divs are generated by loop and are output to the right of the link.

What I’m struggling with is a clean piece of Javascript which will change the class on the link and div at the same time. I’m using the following:

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

This works well when I want to change the class on a small number of elements but it far from scalable.

Can anyone suggest I can get the Javascript to recongise the ‘*’ as a wildcard and change the class based on the row ID? Basically… On click, any link or div starting with ‘row1’ get’s THIS class.

Thanks!

RRfive

---

Sorry, forgot to include the 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

You can use starts with selector.

Try this:

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