添加到收藏夹，jquery

Add to favorites, jquery

本文关键字：jquery 收藏夹 添加      更新时间：2023-09-26

我正在为一个属性网站创建一个'favorites'样式系统，用户可以保存属性以供以后查看。该系统使用Jquery工作，所以页面不需要刷新。属性的详细信息页包含一个"添加到收藏按钮"，这很好:

$("#addFavorites").click(function() {       
var locationID = $("#locationID").val();

但是当所有的属性都在一个页面上列出时，我该如何编码呢?每个"添加到收藏夹"按钮都必须使用唯一的id或其他东西，但不确定如何接近这个

最精确的方法是使用默认的html - formula。我把它写短一点:

<form ...>
  <label for="fav1">Fav1</label>
  <input type="checkbox" name="favorites[]" id="fav1" value="1" />
  <label for="fav2">Fav2</label>
  <input type="checkbox" name="favorites[]" id="fav2" value="2" />
  <submit>
</form>

这就是丑陋的表单，你可以用CSS把它变得漂亮。使用jQuery，您现在总是在用户选中任何复选框时提交表单，例如:

$('input[type=checkbox]').change(//do ajax submit);

在AJAX文件中，只需读取数组:

foreach($_POST['favorites'] as $fav) {
  addFavToUser($fav, $user);
}

这就像简单地解释给你一个想法，而不是完整的"干净"的解决方案。但我希望这对你有所帮助-如果它确实如此，我总是感谢投票;)

您的每个"收藏夹"都需要一个唯一的id

…．..

然后. .$ (' .favorite ') .click(函数(){

(美元).whateveryouwanttodo ();

});

$(this)将包含被点击的锚标记。从那里你可以得到id，并调用你的ajax post或任何你想用它做的事情。

在jQuery中，您可以使用相对定位来选择感兴趣的项目。因此，例如，如果每个项目后面都有一个favorite按钮，则可以从被单击的项目遍历DOM以查找相关的项目。然后，您可以通过AJAX将其发布回来，以存储它，并根据需要更新元素以反映更新后的状态。

HTML(假设您使用样式来显示图标和收藏夹状态)

 <span class="normal" data-location="A">Location A</span> <span class="icon-favorite"></span>

JS 

 $('.favorite').click( function() {
       var data = [],
           newClass = 'favorite',
           oldClass = 'normal',
           $this = $(this),
           $location = $(this).prev('span');
       // if already favorited, reverse the sense of classes
       // being applied
       if ($location.hasClass('favorite')) {
          newClass = 'normal';
          oldClass = 'favorite';
       }
       data['location'] = $location.attr('data-location');
       $.post('/toggle_favorite', data, function(result) {
            if (result.Success) {
                $location.removeClass(oldClass).addClass(newClass);
                $this.removeClass('icon-'+newClass).addClass('icon-'+oldClass);
            }
            else {
                alert('could not mark as favorite');
            }
       },'json');
  });
相关文章：