Question

我有一个我喜欢的物品的按钮，当我单击它时，我希望此按钮可以更改。当ajax调用成功后，应该修改按钮。我已经编写了这段代码，但是当我单击“隐藏”按钮时，不显示“显示”按钮。

<script type="text/javascript" src="https://ajax.googleapis.com /ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">

$(function() {
$("#moins").click(function() {
$.ajax({
  type: "POST",
  url: $(this).attr('action'),
  data: { [this.id]: this.value },
  success: function(retour) {

$("#moins").hide();
$("#plus").show();

      }
    });
   return false;
  });
});

$(function() {
$("#plus").click(function() {
$.ajax({
  type: "POST",
  url: $(this).attr('action'),
  data: { [this.id]: this.value },
  success: function(retour) {

$("#plus").hide();
$("#moins").show();

      }
    });
   return false;
  });
});

</script>

Answer 1

如果我对您的理解正确，这就是您要寻找的东西。

为此，您可以使用JQuerys toggle()函数。
如果给定元素被隐藏，则将显示该元素，反之亦然。

$(document).ready(function(){
    $("#addFavourite").click(function() {

        // AJAX call to ADD to favourite

        // assuming it was successful
        // switch ICONS
        switchFavIcon($(".favIcon"));

    });

    function switchFavIcon(element){
        if(element.hasClass("far")){
            element.removeClass("far fa-heart");
            element.addClass("fas fa-heart");
        } else {
            element.removeClass("fas fa-heart");
            element.addClass("far fa-heart");
        }
    }
});

#addFavourite {
    background: none;
    border: 1px solid #ddd;
    font-size: 2em;
    border-radius: 5px;
    padding: 0px 20px;
    color: #989898;
}

<html lang="en" dir="ltr">
	<head>
		<meta charset="utf-8">
		<title></title>

		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/solid.css" integrity="sha384-+0VIRx+yz1WBcCTXBkVQYIBVNEFH1eP6Zknm16roZCyeNg2maWEpk/l/KsyFKs7G" crossorigin="anonymous">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/regular.css" integrity="sha384-aubIA90W7NxJ+Ly4QHAqo1JBSwQ0jejV75iHhj59KRwVjLVHjuhS3LkDAoa/ltO4" crossorigin="anonymous">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/fontawesome.css" integrity="sha384-jLuaxTTBR42U2qJ/pm4JRouHkEDHkVqH0T1nyQXn1mZ7Snycpf6Rl25VBNthU4z0" crossorigin="anonymous">

		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

	</head>
	<body>
		<button id="addFavourite" data-action="addFav" type="button" name="button"><img src="" alt="">
			<i class="favIcon far fa-heart"></i>
		</button>
	</body>
</html>

我的显示和隐藏按钮的代码无法正常工作

1 个答案: