0

当我单击具有相同类的 div 时，我想获得具有相同类的 Div 属性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>4 Bros Info</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>

    <header>
        <div class="main">
            <div class="logo">
                <h1><a href="/"> 4 Bros Info</a> </h1>
            </div>
            <ul>
                <li> <a class="active" href="/">Home</a></li>
                <li> <a href="user-data.php">All Users Data</a></li>
                <li> <a href="#">Blog</a></li>
                <li> <a href="team.php">Our Team</a></li>
                <li> <a href="jstest.php">JS Practice</a></li>
                <li> <a href="login.php">Login</a></li>

            </ul>
        </div>
    </header>
    <div class="row">
        <div class="container">
            <h2>CHOOSE YOUR PLAN</h2>
            <div class="step1">
                <p>STEP 1. ONGOING SHIPMENTS - CHOOSE A SIZE</p>
            </div>
            <div class="sizes">
                <div class="col-4">
                    <div class="box" value="$12">
                        <strong>7 oz</strong>
                        <div class="cup">14 cups / 1 drinker</div>
                        <div class="orange_line"></div>
                        <span class="price">$12 <small>($1.75 / oz)</small></span>
                        <div class="day">Free Shipping <br>(Avg. 3.1 days)</div>
                        <span class="tickicon"></span>
                    </div>
                </div>
                <div class="col-4">
                    <div class="box selected1" value="$16">
                        <div class="most_popular">MOST POPULAR</div>
                        <strong>11 oz</strong>
                        <div class="cup">22 cups / 1-2 drinkers</div>
                        <div class="orange_line"></div>
                        <span class="price">$16 <small>($1.45 / oz)</small></span>
                        <div class="day">Free Shipping<br>(Avg. 3.1 days)</div>
                        <span class="tickicon"></span>
                    </div>
                </div>
                <div class="col-4">
                    <div class="box" value="$34">
                        <strong>32 oz</strong>
                        <div class="cup">64 cups / 2-3 drinkers</div>
                        <div class="orange_line"></div>
                        <span class="price">$34 <small>($1.02 / oz)</small></span>
                        <div class="day">Free Priority Shipping<br>(1-3 days guaranteed)</div>
                        <span class="tickicon"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="notice">Not sure? You can change plans anytime!</div>
        </div>
        <div class="container">
            <div class="step2">
                <p>STEP 2. ONGOING SHIPMENTS - HOW OFTEN WOULD YOU CONSUME 22 CUPS ?</p>
            </div>
            <div class="frequency">
                <div class="col-4">
                    <div class="box2" value="Every week">
                        <div class="fre">Every week</div>
                        <div class="tick"></div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="box2 selected1" value="Every other week">
                        <div class="fre">Every other week</div>
                        <div class="tick"></div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="box2" value="Every four weeks">
                        <div class="fre">Every four weeks</div>
                        <div class="tick"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="value">
                <div class="item-amount">$16</div>
                <div class="weeks">every other week</div>
                <button id="btn" type="submit" value="submit">Add to Cart</button>
            </div>
        </div>
    </div>


    <div class="footer">Copyright @ 4 Bros Info</div>


    <script>
        $(document).ready(function () {
            var price;
            var freq;
            $('.box').click(function () {
                price = $(this).attr('value')
                console.log(price)
                $('.item-amount').text(price)
            });
            $('.box2').click(function () {
                freq = $(this).attr('value')
                console.log(freq)
                $('.weeks').text(freq)
            });

            $('.box').click(function () {
                $('.box').removeClass('selected1')
                $(this).addClass('selected1')
            });
            $('.box2').click(function () {
                $('.box2').removeClass('selected1')
                $(this).addClass('selected1')
            });

            $('#btn').click(function () {
                console.log('Your Price is ' + price + ' and your Frequency is ' + freq)
            });


        });
    </script>

</body>
</html>

4

0 回答 0