javascript - 执行javascript代码时CSS样式不适用

Question

我正在使用 PHP 捕获来自另一个页面的 GET 请求，并使用如下所示的内容向用户显示所有信息(使用 Bootstrap ):

但是我得到了这个:

我正在使用控制结构的替代语法并且工作正常。但是没有应用 CSS，我不知道为什么。这是相关代码:

        <?php

        $transactionId = $_REQUEST['transactionId'];

        if ($_REQUEST['transactionState'] == 4 ):
            $estadoTx = "Transacción aprobada";
            ?>        

            <div class="container-fluid"> 
                        <ul>
                            <li class="row">
                                <span class="itemName" id="quantity_first_product">Estado de la transaccion: </span>
                                <p class="description"><span  id="state"></span></p>
                            </li>
                            <li class="row">
                                <span class="itemName" id="quantity_first_product">ID de la transaccion: </span>
                                <p class="description"><span  id="transactionID" ></span></p>       
                            </li>                            
                        </ul>
            </div>

            <script type="text/javascript">
                var transaction_state;
                var transactionState_span = document.getElementById("state");
                transaction_state = <?php echo json_encode($estadoTx); ?>;
                transactionState_span.innerHTML = transaction_state;

                var transaction_id;
                var transactionID_span = document.getElementById("transactionID");
                transaction_id = <?php echo json_encode($transactionId); ?>;
                transactionID_span.innerHTML = transaction_id;
            </script>

         <?php else:
            $estadoTx=$_REQUEST['mensaje'];
            ?>
            <h1>Determinar que sucede</h1>
        <?php endif; ?>

这两个 CSS 样式是:

.itemName{  
    color: #727578;
    font-size :16px;
    font-weight: bold;
    float: left;
    padding-left:25px;
    margin-right: 25px;
}

.description{   
    color: #4ea6bc;
    font-size :18px;
    font-weight: bold;
    float : left;
    padding-left: 15px;
}

当浏览器执行代码时，javascript 行中的 PHP 代码工作正常:

我正在尽我所能，但没有任何效果。很抱歉发了这么长的帖子，感谢您的帮助!

编辑

在head部分导入CSS

<link rel="stylesheet" type="text/css" href="assets/css/custom.css"/>

很抱歉重复的 ID，一些 ctrl-c ctrl-v 问题。

Answer 1

我不知道你在做什么。我不会说西类牙语也无济于事，但我会尽力而为。

• 您遗漏了最重要的信息:如何导入 CSS？

• 无论如何，首先要注意的是:不要使用相同的 ID 两次。
  <span class="itemName" id="quantity_first_product">应该是 <span class="itemName" id="somedifferentid"> .

• 接下来的事情是，当我尝试运行它时，CSS 起作用了，但我得到了完全乱码。它看起来像这样:
  

• 所以我添加了一些规则以使其看起来更好:

  li.row {
      clear: both;
      list-style-type: none;
  }
  

  而且描述上的边距看起来一点也不好，所以我也删除了它:

  .description {
      [...]        
      margin:0px;
  }
  

  现在看起来像这样:

  

• 所以 CSS cleary 对我有效。这是一个工作示例:

  获取数据的来源:

  <form method="get" action = "newEmptyPHP.php">
      <input name = "transactionId" type="hidden" value="some-weird-id" >
      <input name = "transactionState" value="4">
      <textarea name = "mensaje"  rows="1" cols="50">Not everyone speaks spanish</textarea>
      <input type = "submit" value="Submit" >
  </form>
  

  您的 php 文件:

  <?php
  $transactionId = $_REQUEST['transactionId'];
  if ($_REQUEST['transactionState'] == 4):
      $estadoTx = "Transacción aprobada"; ?>        
      <style>
          li.row {
              clear: both;
              list-style-type: none;
          }
          .itemName{  
              color: #727578;
              font-size :16px;
              font-weight: bold;
              float: left;
              padding-left:25px;
              margin-right: 25px;
          }
  
          .description{   
              color: #4ea6bc;
              font-size :18px;
              font-weight: bold;
              float : left;
              padding-left: 15px;
  
              margin: 0px;
          }
      </style>
      <div class="container-fluid"> 
          <ul>
              <li class="row">
                  <span class="itemName" id="quantity_first_product">Estado de la transaccion: </span>
                  <p class="description"><span class="description"  id="state">This description is in English, because I don't speak spanish.</span></p>
              </li>
              <li class="row">
                  <span class="itemName">ID de la transaccion: </span>
                  <p class="description"><span class="description" id="transactionID" >This description is in English, because I don't speak spanish.</span></p>        
              </li>                            
          </ul>
      </div>
  
      <script type="text/javascript">
          var transaction_state;
          var transactionState_span = document.getElementById("state");
          transaction_state = <?php echo json_encode($estadoTx); ?>;
          transactionState_span.innerHTML = transaction_state.toString();
  
          var transaction_id;
          var transactionID_span = document.getElementById("transactionID");
          transaction_id = <?php echo json_encode($transactionId); ?>;
          transactionID_span.innerHTML = transaction_id.toString();
      </script>
  <?php 
      else:
          $estadoTx = $_REQUEST['mensaje']; ?>
          <h1>Determinar que sucede</h1>
          Something's missing here, compadre.
  <?php endif; ?>