使用 js 或 jQuery 将 data-id 附加到 href

Question

假设我有一个如下所示的表格：

<table>
  <tbody>
    <tr class="card-id" data-id="1">
      <td>
         <a href="http://www.test.nl/">Card 1</a>
         <input class="option" type="checkbox" />
      </td>
    </tr>
    <tr class="card-id" data-id="2">
      <td>
         <a href="http://www.test.nl/">Card 2</a>
         <input class="option" type="checkbox" />
      </td>
    </tr>
    <tr class="card-id" data-id="3">
      <td>
         <a href="http://www.test.nl/">Card 3</a>
         <input class="option" type="checkbox" />
      </td>
    </tr>
  </tbody>
</table>

是否可以获取已检查的表行的数据ID，然后将它们附加到url？

我尝试在 js 中使用此代码

        $(".option").click(function () {
          var id = $(this).closest('.card-id').data('id');

          $(".options-count a").each(function () {
            var $this = $(this);
            var _href = $this.attr("href");
            $this.attr("href", _href + 'card-id=' + id);
          });
       });

得到了这个

<a href="http://www.test.nl/card-id=1card-id=2"></a>

但我希望得到类似的东西

<a href="http://www.test.nl/result?card_id=1&card_id=2">Card 1</a>

Answer 1

$(document).ready(function(){
    $('[type=checkbox].option').change(function(ev){
        var anchor = $(this).parent('td').first('a')
        var url = "http://www.test.nl/result?";
        var queryString = '';
        $(this).parents('tbody').find('[type=checkbox]:checked').each(function(n,cb){
           queryString += 'card_id=' + $(cb).parents('tr.card-id').attr('data-id') + '&';
        });
      url += queryString.slice(0, -1);;
      anchor.attr('href',url);
      console.log(url);
    });
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="card-id" data-id="1">
      <td>
         <a href="http://www.test.nl/">Card 1</a>
         <input class="option" type="checkbox" />
      </td>
    </tr>
    <tr class="card-id" data-id="2">
      <td>
         <a href="http://www.test.nl/">Card 2</a>
         <input class="option" type="checkbox" />
      </td>
    </tr>
    <tr class="card-id" data-id="3">
      <td>
         <a href="http://www.test.nl/">Card 3</a>
         <input class="option" type="checkbox" />
      </td>
    </tr>
  </tbody>
</table>

Answer 2

您可以在复选框的更改事件中执行以下操作

var id = [];//create a empty list of ids
var href = "http://www.test.nl/result?card_id=";//create the start of the url
$('input:checked').each(function(){
   id.push($(this).closest('.card-id').attr('data-id'));//push the id of the selected to the array
})
href = href+id.join('&card_id=');//join the array to a string
console.log(href)//append the formed link to a link tag or in this case to the console

演示：

$(document).ready(function() {
  $('[type=checkbox].option').change(function(ev) {
    var id = []; //create a empty list of ids
    var href = "http://www.test.nl/result?card_id="; //create the start of the url
    $('input:checked').each(function() {
      id.push($(this).closest('.card-id').attr('data-id')); //push the id of the selected to the array
    })
    href = href + id.join('&card_id='); //join the array to a string
    console.log(href);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="card-id" data-id="1">
      <td>
        <a href="http://www.test.nl/">Card 1</a>
        <input class="option" type="checkbox" />
      </td>
    </tr>
    <tr class="card-id" data-id="2">
      <td>
        <a href="http://www.test.nl/">Card 2</a>
        <input class="option" type="checkbox" />
      </td>
    </tr>
    <tr class="card-id" data-id="3">
      <td>
        <a href="http://www.test.nl/">Card 3</a>
        <input class="option" type="checkbox" />
      </td>
    </tr>
  </tbody>
</table>

或者更好的是使用单个命名变量并在后端拆分 id：

 $(document).ready(function() {
      $('[type=checkbox].option').change(function(ev) {
        var id = []; //create a empty list of ids
        var href = "http://www.test.nl/result?card_id="; //create the start of the url
        $('input:checked').each(function() {
          id.push($(this).closest('.card-id').attr('data-id')); //push the id of the selected to the array
        })
        href = href + id.join(','); //join the array to a string
        console.log(href);
      });

$(document).ready(function() {
  $('[type=checkbox].option').change(function(ev) {
    var id = []; //create a empty list of ids
    var href = "http://www.test.nl/result?card_id="; //create the start of the url
    $('input:checked').each(function() {
      id.push($(this).closest('.card-id').attr('data-id')); //push the id of the selected to the array
    })
    href = href + id.join(','); //join the array to a string
    console.log(href);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="card-id" data-id="1">
      <td>
        <a href="http://www.test.nl/">Card 1</a>
        <input class="option" type="checkbox" />
      </td>
    </tr>
    <tr class="card-id" data-id="2">
      <td>
        <a href="http://www.test.nl/">Card 2</a>
        <input class="option" type="checkbox" />
      </td>
    </tr>
    <tr class="card-id" data-id="3">
      <td>
        <a href="http://www.test.nl/">Card 3</a>
        <input class="option" type="checkbox" />
      </td>
    </tr>
  </tbody>
</table>

Answer 3

据我了解，您只是想获得“data-id”。如果是，那么您可以通过以下两种方式进行操作：

第一个：

<table id=tbl1><tbody>
<tr class="card-id" data-id="1">
  <td>
     <a href="http://www.test.nl/">Card 1</a>
     <input class="option" type="checkbox" />
  </td>
</tr>
<tr class="card-id" data-id="2">
  <td>
     <a href="http://www.test.nl/">Card 2</a>
     <input class="option" type="checkbox" />
  </td>
</tr>
<tr class="card-id" data-id="3">
  <td>
     <a href="http://www.test.nl/">Card 3</a>
     <input class="option" type="checkbox" />
  </td>
</tr>

var test=  $("#tbl1");
test.find('[data-id="qty"]')

这将为您提供表格的完整“TR”行。

如果你想获得“data-id”的值，那么你必须使用

var value = test.attr("data-id");

希望这会对您有所帮助。