Question

我尝试创建一个跟随按钮-单击该按钮会将ajax请求发送到我的后端脚本，并且如果执行该操作，它将返回一个触发按钮文本从“跟随”变为“跟随”的值-并且部分工作正常。但是我在数据属性“ data-follow”中向用户发送数据的jquery部分不会与“ data-unfollow”切换。它仅在刷新浏览器时有效，这意味着您只能单击“跟随”按钮，将其看到，并将data属性更改为“取消关注”，但是如果再次单击，它将不起作用。我无法弄清楚，我已经在堆栈中进行了搜索。

错误

TypeError: $(...).attr(...) is undefined

HTML

<button id="follow" data-follow="1, username1, username2">
        <div><img src="images/loggedin/follow.png"></div>
        <div>Follow</div>
</button>

JQuery

$("button[data-follow]").click(function(){

    var button = $(this);
    var data = $(this).attr("data-follow").split(",");
    alert(data);
    button.find(" > div:last-child").animate({opacity: "0"},200, function(){
       $(this).animate({opacity: "1"},200);
       $(this).html("Following");
       var dataValue = $(this).closest("#follow").attr("data-follow");
       $(this).closest("#follow").attr("data-unfollow", dataValue);
       $(this).closest("#follow").removeAttr("data-follow");
   });

});


$("button[data-unfollow]").click(function(){

    var button = $(this);
    var data = $(this).attr("data-unfollow").split(",");
    alert(data)
    button.find(" > div:last-child").animate({opacity: "0"},200, function(){
       $(this).animate({opacity: "1"},200);
       $(this).html("Follow");
       var dataValue = $(this).closest("#follow").attr("data-unfollow");
       $(this).closest("#follow").attr("data-follow", dataValue);
       $(this).closest("#follow").removeAttr("data-unfollow");
   });

});

Answer 1

    add_action( 'adl_booking_reminder_product_code', 'hounds_email_booking_reminder' );

    function hounds_email_booking_reminder ($order_id) {
       $order = new WC_Order( $order_id );

       foreach($order->get_items() as $item) {
          $_product = get_product($item['product_id']);
          if ($item['product_id']== 11) {
             echo "<p>Access code for product 1</p>";
          }
          else {
             echo "<p>Access code for product 2</p>";
          }
        }
    }

尝试一下。

Answer 2

更多通用答案！您可以通过jQuery删除，添加和切换CSS类来简单地更改按钮的状态。

在（document.ready）处，通过ajax请求检查是处于跟随状态还是非跟随状态，然后更改按钮的CSS类。

if(following){
  $("#buttonID").toggleClass('following_btn');
} else{
  $("#buttonID").toggleClass('unfollowing_btn');
}

单击后，在Web服务中处理您的代码。如果未关注，则遵循；如果遵循，则遵循。然后，如果要返回更新的状态，请使用该状态相应地重新更新按钮的css类。或在单击按钮的ajax调用完成后执行ajax调用以验证新状态。

CSS：

.following_btn{
  //your following style
 }
.unfollowing_btn{
  //your un-following style
 }

希望有帮助！

切换属性和CSS数据

2 个答案: