Question

有一种方法可以在下面“干掉”这段代码吗？我的意思是，不要为每个元素重复click(function())（余额和订单提取）。

 $("#cash-extract, #balance-extract, #orders-extract").hide();
    $("#cash-history").click(function() {
        $("#cash-extract").fadeToggle("fast", "linear");
    })

谢谢！

HTML

<h3 id="cash-history">title</h3>
    <div id="cash-extract">
</div>
<h3 id="balance-history">title</h3>
    <div id="balance-extract">
</div>
<h3 id="orders-history">title</h3>
    <div id="orders-extract">
</div>

Answer 1

你可以绑定到多个dom元素：

$("#cash-history, #balance-history, #orders-history").click(function() {
            $("#cash-extract, #balance-extract, #orders-extract").hide();
            $(this).next().fadeToggle("fast", "linear");
        });

或：

  $("#cash-history, #balance-history, #orders-history").click(function() {
            $("#cash-extract, #balance-extract, #orders-extract").hide();
            $(this).next().fadeToggle("fast", "linear");
        });

或只打开一个提取物：

<html>
<head>
    <title>insert data in database using PDO(php data object)</title>
    <link rel="stylesheet" type="text/css" href="style-login.css">
</head>
<body>

    <div id="main">
        <h1>Login using PDO</h1>
    <div id="login">
        <h2>Login</h2>
        <hr/>
        <form action="" method="post">
            <label>Email :</label>
            <input type="email" name="stu_email" id="email" required="required" placeholder="john123@gmail.com"/><br/><br />
            <label>Password :</label>
            <input type="password" name="stu_ww" id="ww" required="required" placeholder="Please Enter Your Password"/><br/><br />
            <input type="submit" value=" Submit " name="submit"/><br />
        </form>
    </div>

    </div>

    <?php
    //require ("encrypt.php"); 
        if(isset($_POST["submit"])){
            $hostname='localhost';
            $username='root';
            $password='';
            $pdo = "college";
            $student_email = $_POST["stu_email"];
            $encrypt_key = "4ldetn43t4aed0ho10smhd1l";

            try {
                $dbh = new PDO("mysql:host=$hostname;dbname=college","root","$password");                   
                $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

                    // Query
                    $statement = $dbh->prepare("SELECT student_email, student_city, AES_DECRYPT(student_password, '$encrypt_key')
                        AS student_password FROM students WHERE student_email = :student_email ORDER BY student_email ASC");

                    // Assign and execute query
                    $statement->bindParam(':student_email', $student_email, PDO::PARAM_STR);
                        $statement->setFetchMode(PDO::FETCH_ASSOC);
                             $statement->execute();

                    // Get data
                        while($row = $statement->fetch()) {
                            echo "1 ,";                                
                            //$columnA_value = $row['student_city'];
                            $columnB_value = $row['student_password'];
                        }
                        echo "2 ,";
                        echo $columnB_value;
            }

                catch(PDOException $e)
                {
                    echo $e->getMessage();
                }

        }
    ?>
</body>
</html>

Answer 2

使用.not()取消选择您不想ID的所有class或click

$("#cash-extract, #balance-extract, #orders-extract").hide();
        $("#cash-history").not("mention all IDS here to exclude").click(function() {
            $("#cash-extract").fadeToggle("fast", "linear");
        })

Answer 3

我可以建议你两件事：

使用公共类名绑定事件，例如.cash。
您可以使用data-*属性来存储目标元素，例如data-target="cash-target"。

见：

<button class='cash' data-target='cash-extract'>cash history</button>

<div id='cash-extract'>Cash history.</div>

现在您可以将其与此相关联：

$('.cash').click(function(){
    var target = $(this).data('target');
    $('#'+target).fadeToggle("fast", "linear");
});

如果您不想重组它，可以使用.next()定位它并执行此操作：

$("#cash-history, #balance-history, #orders-history").click(function() {
    $(this).next('div').fadeToggle("fast", "linear");
});

DRY切换功能

3 个答案: