javascript - 该类不适用于html中的pre标签。

Closed. This question is off-topic。它当前不接受答案。












                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。

                        4年前关闭。



我正在尝试使用javascript在pre标签上添加一个类，我尝试了此代码。

<?php
session_start();
include 'connection.php';

?>


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Post-Question</title>
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="code-prettify-master/loader/prettify.css"/>
    <style>

    </style>

</head>
<body>
<div class="row">
<div class="container">
<div class="page-header"></div>
    <div class="well-lg col-md-6">
        <?php
        if(isset($_SESSION['sucess']))
        {?>
           <span class="alert alert-success"><?php echo $_SESSION['sucess'];?></span>
        <?php
            unset($_SESSION['sucess']);
        }
        elseif(isset($_SESSION['error']))
        {?>
        <span class="alert alert-danger"><?php echo $_SESSION['error'];?></span>
        <?php
            unset($_SESSION['error']);
        }

        ?>
    </div>
    <div class="well well-lg">
        Post Your Question Here!
    </div>

    <div class="col--md-6">
        <form action="ques.php" method="post">

            <input type="text" name="question" placeholder="Enter your issue here" class="form-control"><br>
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
               <span class="btn"><span class="glyphicon glyphicon-bold"></span></span>
               <span class="btn">  <span class="glyphicon glyphicon-italic"></span></span>
                 <span class="btn"><span class="glyphicon glyphicon-link">   </span></span>
               <span class="btn"> <span class="glyphicon glyphicon-chevron-left">   </span>
                <span class="glyphicon glyphicon-chevron-right"></span></span>
                <span></span>
                <span></span>
            </div>
            <div class="panel-body">



            <textarea class="form-control" name="desc" placeholder="Iuuse Description">

            </textarea><br/>
            <input type="submit" class="btn btn-default">
        </form>
    </div>
        </div>
<div class="container">
    <?php
    $smt=$conn->prepare("SELECT * FROM qa");
    $smt->execute();
    while($rows=$smt->fetch(PDO::FETCH_OBJ)):?>

     <div class="h2"> <?php echo $rows->QUES; ?>!</div>
        <div class="h4"><pre><code><?php echo htmlentities($rows->ANS); ?></code></pre></div>
    <?php endwhile;?>


</div>
</div>




</div>


<script src="js/jquery.js"></script>

    <script type="text/javascript">
    $(window).load(function () {
      // var pro=document.getElementsByTagName('pre');
        $('pre code').addClass('prettyprint');
    });

</script>

<script src="code-prettify-master/loader/run_prettify.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

如果我使用另一个由prettyprint插入的类，则代码有效，并且如果我使用<pre class="prettyprint">之类的prettyprint类，则它将起作用，但我想通过js方法使用它。

最佳答案

首先，在HTML中的<code>中包含<pre>毫无意义，因为这可能会使语法高亮：

<div class="h4"><pre><?php echo htmlentities($rows->ANS); ?></pre></div>

如果您打算为pre添加一个类，请执行以下操作：$('pre').addClass('prettyprint');;如果要使prettyprint语法高亮显示在这些pre上工作，以防万一，请在将类添加到pre之后，运行prettyprint脚本。

$(window).load(function () {
        $('pre code').addClass('prettyprint');
        $.getScript( "code-prettify-master/loader/run_prettify.js", function( data, textStatus, jqxhr ) {
           console.log("prettified");
           });
});

尽管it should work just fine like this。

如果使用的是prettify.js而不是run_prettify.js，则需要调用prettyPrint() in this manner。

如果要为某些<b></b>附加点击事件，则应首先为其提供一个类：<b class="click_this_old_sport"> hey jude</b>然后只需在jQuery中执行以下操作：

 $(".click_this_old_sport").click(function(){ alert("clicked!") });

关于javascript - 该类不适用于html中的pre标签。，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32330976/