用Js或php创建一个新按钮

时间:2018-05-24 15:17:58

标签: javascript php jquery css

我的WP网站上有一个迷你车(下拉)。当有产品和空的时候,我已经设计了设计。我之前和之后都使用CSS伪来添加内容。

可以添加带链接的按钮吗?当它是空的时我想要一个按钮。

以下是我尝试的CSS和Js代码,因为我无法访问html。

.woocommerce-mini-cart__empty-message{
     padding-top: 30px;
     text-align:center;
     visibility:hidden;
     color: #5D5D5D;
     background-color:#F0EFEB;
     pointer-events: none;
}
 .woocommerce-mini-cart__empty-message::after{
     content: 'Lets start shopping!';
     visibility:visible;
     display:block;
     margin-top:2px!important;
     font-size:14px!important;
     line-height:20px!important;
     font-family:futura!important;
     pointer-events: none;
}
 .woocommerce-mini-cart__empty-message::before {
     content: url(http://naristore.com/wp-content/uploads/2018/01/shop- icon@2x.png) '\A \A YOUR BAG IS EMPTY';
     white-space: pre;
     visibility:visible;
     display:block;
     text-align:center;
     color:#5D5D5D!important;
     font-size:24px!important;
     line-height:26px!important;
     font-family:futura!important;
     letter-spacing:1px;
     pointer-events: none;
}


<script>
    $(document).ready(function() {
        $("<button>click</button").appendTo('.woocommerce-mini- cart__empty - message ');
    });
</script>

2 个答案:

答案 0 :(得分:0)

我不确定你在问什么..你只是想添加一个按钮吗?如果是这样,请使用append,而不是appendTo。

<script>
$(document) .ready(function(){
      var element= "<button>click</button";

    $(".woocommerce-mini- 
cart__empty-message") .append(element)

});
</script>

答案 1 :(得分:0)

尝试使用JavaScript而不是jquery。

&#13;
&#13;
.btn-style {
  display: inline-block;
  padding: 15px 24px;
  text-align: center;
  border: none;
  color: #fff;
  background-color: #008CBA;
  margin: 2px 5px;
  text-decoration: none;
  cursor: pointer;
  font-size: .95em;
}
&#13;
const woocommerce = document.querySelector('.woocommerce-mini-cart__empty-message');
const btn = document.createElement('button');
btn.textContent = 'Empty';
btn.className = 'btn-style';
woocommerce.appendChild(btn);
&#13;
&#13;
&#13;

别忘了选择添加的班级btn-style&amp;添加所需的样式。我添加了一些基本的CSS。