Question

我正在为属性网站创建一个“收藏夹”样式系统，用户可以在其中保存属性以便稍后查看。系统使用Jquery工作，因此页面不必刷新。属性的详细信息页面包含“添加到收藏夹按钮”，这样可以正常工作：

$("#addFavorites").click(function() {       

var locationID = $("#locationID").val();

但是当我在一个页面上列出所有属性时，我将如何对此进行编码，每个“添加到收藏夹”按钮都必须使用唯一的ID或其他内容，但不确定如何处理此问题。

Answer 1

最精确的方法是默认的HTML-Formular。我会做一个简短的：

<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);
}

这就像简单解释给你一个想法，而不是整个“干净”的解决方案。但我希望这可以帮助你 - 如果确实如此，我总是很感激投票给它;）

Answer 2

您的每个“收藏夹”都需要一个唯一ID

...... ......

然后.. $（ '喜爱'）。点击（函数（）{

$（本）.whateveryouwanttodo（）;

}）;

$（this）将包含单击的锚标记。从那里你可以得到身份证，并打电话给你的ajax帖子或任何你想做的事情。

Answer 3

在jQuery中，您可以使用相对定位来选择感兴趣的项目。因此，例如，如果每个项目后跟一个收藏夹按钮，您可以从单击的项目遍历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');
  });

加入收藏夹，jquery

3 个答案: