Question

我正在尝试将指定的文章保存为收藏夹。所以我有一个按钮，它应该获得该文章的ID，以及用户的ID（我将它们存储到db中）。我试图做这样的事情：这是一个刀片......

@foreach ( $results['matches'] as $doc => $docinfo )
.
.
.
    <button  class="bookmark"><img id="favorite" align="right" src="{{ asset('/img/icon_add_fav.png')}}"></button>
    <input type="hidden" id="{{Auth::user()->id}}" value="{{Auth::user()->id}}">
    <input type="hidden" id="{{$docinfo['attrs']['sid']}}" value="{{$docinfo['attrs']['sid']}}">
.
.
.
@endforeach

到目前为止，我已尝试在控制台中输出值：

    <script type="text/javascript">
       $('#favorite').click(function(){
          addFavorite();
       });

       function addFavorite(){
          var idUser = document.getElementById({{Auth::user()->id}}).value;
          var idArticle= document.getElementById({{$docinfo['attrs']['sid']}}).value;
      console.log(idUser + '#' + idArticle);
   }
    </script>

如果单击第一篇文章的按钮，它只会打印到控制台。但是，它会打印上一篇文章的ID ...

例如......

<button  class="bookmark">
    <img id="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input type="hidden" id="15" value="15">
    <input type="hidden" id="1" value="1">

<button  class="bookmark">
    <img id="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input type="hidden" id="15" value="15">
    <input type="hidden" id="2" value="2">

<button  class="bookmark">
    <img id="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input type="hidden" id="15" value="15">
    <input type="hidden" id="3" value="3">

这里有三个按钮。当我按下第二个和第三个时，没有任何反应。当我按下第一个时，它不会按照它应该打印15#1，但会打印15#3。

当我点击相关文章的按钮时，我想打印id和文章ID ...

Answer 1

执行类似此操作的绑定点击button的课程bookmark

$(".bookmark").on("click",function(){
var idUser = $(this).next().val();
var idArticle = $(this).next().next().val();
console.log(idUser + "#" + idArticle);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button  class="bookmark">
    <img id="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input type="hidden" id="15" value="15">
    <input type="hidden" id="1" value="1">

<button  class="bookmark">
    <img id="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input type="hidden" id="15" value="15">
    <input type="hidden" id="2" value="2">

<button  class="bookmark">
    <img id="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input type="hidden" id="15" value="15">
    <input type="hidden" id="3" value="3">

Answer 2

您对所有图片代码使用相同的id。这不好。您应该使用class代替id。

因此，您的html将如下所示

<button  class="bookmark">
    <img class="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input class="userid" type="hidden" id="125" value="135">
    <input class="articleid" type="hidden" id="1" value="1">

<button  class="bookmark">
    <img class="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input class="userid" type="hidden" id="135" value="145">
    <input class="articleid" type="hidden" id="2" value="2">

<button  class="bookmark">
    <img class="favorite" align="right" src="http://localhost:8000/img/icon_add_fav.png">
    </button>
    <input class="userid" type="hidden" id="165" value="155">
    <input class="articleid" type="hidden" id="3" value="3">

和Script

  $('.bookmark').click(function(){
          var userid=$(this).next('.userid').val();
          console.log(userid);
  });

Working fiddle

Answer 3

也许这个解决方案可以帮到你。

function addFavourite(userId, articleId) {
    console.log(userId + "#" + articleId)
}

渲染HTML时

@foreach ( $results['matches'] as $doc => $docinfo )
.
.
.
    <button  class="bookmark" onClick="addFavourite(Auth::user()->id, $docinfo['attrs']['sid'])" />
.
.
.
@endforeach

Answer 4

您只能拥有一个具有相同id的元素 - 所有按钮都具有相同的id。

使用类连接事件处理程序，然后您可以在事件处理程序中使用this，以便知道按下了哪个按钮。

然后，您可以使用DOM导航$(this).next()，使用属性链接它们或将它们分组到父容器中。

使用.next()：

// wire up to the button, not the image
$('button.bookmark').click(function() {
    var idUser = $(this).next().val();
    var idArticle = $(this).next().next().val();
    console.log(idUser + '#' + idArticle);
});

jQuery - 获取每篇文章的用户ID和文章ID

4 个答案: