Question

怎么了堆栈！我在我公司的网站上实现了一个javascript表单的主要问题。问题是表单不是从样式表继承任何东西。我们所有的企业网站都是使用wordpress构建的。对于这个特定的网站，我们使用带有子主题的divi主题进行自定义。我有他们在ftp上调用的所有javascript文件和php文件，并且表单本身工作得很好，但它在视觉上是一个完全混乱的混乱。我最终在没有divi的另一个测试环境中设置了相同的表单，并且表单最终被设置为与所使用的不同主题相匹配。所以我知道问题是divi，但有没有人对如何在仍然使用divi的同时设置这个表单有任何建议？

以下是相关网站的网址：http://www.haines.com/university/

在选择一个类时，当您单击任何类中的日期链接时，表单将打开。

Answer 1

从我所看到的，您的模板在其CSS中使用动态类。例如：

.registercontainer button {
    border:none;
    font-family:Helvetica,Arial,sans-serif;
}

这意味着你不能重复使用他们的风格，除非你知道如何检索这种身份。

在这种情况下，最简单的方法是复制/粘贴您想要的CSS，然后将其应用到您的表单中：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".button2").click(function(){
        //console.log($($(".price_number2")[$(this).index()-1]).text()+$(this).index());
        $(".textarea").text($($(".price_number2")[$(this).index()-1]).text());
    });
});
</script>
</head>
<body>

<ul class="pricing_table2">
  <li id="leftblock" class="price_block2">
    <div class="price3">
      <div class="price_figure2">
        <span class="price_number2">Deep Blue</span>
      </div>
    </div>
    <ul class="features2">
      <li>Our regular maintenance cleaning. We follow our checklist to the letter. You may choose weekly, bi-weekly or monthly cleanings. If you would like a custom cleaning arrangement, just let us know and we will gladly accommodate your preferences.<br><button type="submit" class="button2" name='submit'>Select</button><br>
      </li><li><span class="packagebottom">* An initial cleaning fee plus the regular fee is charged on the first visit.</span></li>
    </ul>
  </li>
  <li id="centerblock" class="price_block2">
    <div class="price4">
      <div class="price_figure2">
        <span class="price_number2">True Blue</span>
      </div>
    </div>
    <ul class="features2">
      <li>Our regular maintenance cleaning. We follow our checklist to the letter. You may choose weekly, bi-weekly or monthly cleanings. If you would like a custom cleaning arrangement, just let us know and we will gladly accommodate your preferences.<br><br><button type="submit" class="button2" name='submit'>Select</button><br>
      </li><li><span class="packagebottom">* Client must have a Deep Blue cleaning first.</span></li>
    </ul>
  </li>
  <li id="rightblock" class="price_block2">
    <div class="price5">
      <div class="price_figure2">
        <span class="price_number2">Blue Move</span>
      </div>
    </div>
    <ul class="features2">
      <li>Our move out / empty house cleaning. Say goodbye to your old house, apartment or condo and hello to your new one with a copious cleaning. Just open the front door and we will take care of everything.<br><br><br>
      <button type="submit" class="button2" name='submit'>Select</button></li>
    </ul>
  </li>
</ul>

<section id="contactform1" class="cform">
            <div class="wrap">
                <h2 class="sendmessagetext">Get in Touch</h2>
                <form name="simp_cont" method="post" action="<?=$_SERVER['REQUEST_URI'];?>#cform1" class="contact" onSubmit="return validateForm(this)">
    <div class="ribbon"></div>
    <input class="input" name="captcha" style="position:absolute; left:-9999px;" id="captcha" type="text" />
    <input type="text" name="fname" id="name" placeholder="NAME">
    <input type="text" name="phone" id="phone" placeholder="PHONE NUMBER">
    <input type="text" name="email" id="email" placeholder="EMAIL ADDRESS">
    <input type="text" name="footage" id="footage" placeholder="ESTIMATED SQUARE FOOTAGE">
    <textarea class="textarea" name="message" placeholder="COMMENTS"></textarea>
    <input name="form_name" type="hidden" value="contact_form" />
    <button type="submit" class="buttoncontact2" name='submit'>SEND MESSAGE</button>
</form>
                <br><br>
            <div class="clear"></div>
    </div>
</section>

</body>
</html>

应该针对您需要的每种风格（输入，标签等）进行。

Answer 2

好的，这里发生了一些事情。我发现您仍在积极更改代码，因此目前可能并非全部适用。

首先，您重新使用ID。你不能这样做;一个id是唯一的，如果不是，就会引发问题。将studentclasssignup更改为类。

其次，当你想要输入样式时，你将css放在div上。你想要一个div的孩子的CSS。如果你改成一个班级，你可以像这样设计一个孩子：

.studentclasssignup > input { <whatever> }

或者使用id：

#studentclasssignup > input { <whatever> }

但是，请不要重复使用ID。

Javascript没有继承样式

2 个答案: