Question

这是我的代码选择选项，使用html和jquery弹出窗口

问题：：当我选择一个选项时，它起作用了，但是当我选择另一个选项时，它总是得到最后选择的值。

例如。如果我选择游戏名称4- href链接的值必须为name4

https://www.mygames.com/restore/accept/'+ value +
https://www.mygames.com/restore/accept/name4

但是当我选择另一个名称（例如“游戏名称7”）时，它将获得最后一个值，即name4，并且必须为game7

//Selection
$('#mygame').change(function() {
  var value = $(this).find('option:selected').val();

  //Restore
  $('.restore').popover({
    trigger: 'focusin',
    html:true,
    placement:'bottom',
    title:'Restore Folder',
    content:'<a href="https://www.mygames.com/restore/accept/'+value+'" target="_blank" class ="btn btn-info btn-sm">Accept</a>&nbsp;&nbsp;<a href="https://www.mygames.com/restore/review/'+value+'"  target="_blank" class ="btn btn-primary btn-sm">Review</a>'
  });   

  //Backup
  $('.backup').popover({
    trigger: 'focusin',
    html:true,
    placement:'bottom',
    title:'Backup Folder',
    content:'<a href="https://www.mygames.com/backup/accept/'+value+'" target="_blank" class ="btn btn-info btn-sm">Accept</a>&nbsp;&nbsp;<a href="https://www.mygames.com/backup/review/'+value+'"  target="_blank" class ="btn btn-primary btn-sm">Review</a>'
  });   

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div style="padding-bottom:10px;">
  <select name="mygame" id="mygame" style="width:16em;">
    <option value="choose">-- Choose Game --</option>
    <option value="name1">Name of Game 1</option>
    <option value="name2">Name of Game 2</option>
    <option value="name3">Name of Game 3</option>
    <option value="name4">Name of Game 4</option>
    <option value="name5">Name of Game 5</option>
    <option value="name6">Name of Game 6</option>
    <option value="name7">Name of Game 7</option>
    <option value="name8">Name of Game 8</option>
  </select>
</div>
<div style="float:left;">
  <button class="restore" id="restore">Restore Folder </button>  
  <button class="backup" id="backup">Backup Folder</button>                          
</div>  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

Jsfiddle

https://jsfiddle.net/ud5Lrhwb/

Answer 1

与其在每次选择更改时都初始化插件，不如对内容使用函数，并在该函数中获取select的值，并且只初始化一次插件

$('.backup').popover({
  trigger: 'focusin',
  html: true,
  placement: 'bottom',
  title: 'Backup Folder',
  content: function() {
    const value = $('#mygame').val();

    return '<a href="https://www.mygames.com/backup/accept/' + value + '" target="_blank" class ="btn btn-info btn-sm">Accept</a>&nbsp;&nbsp;<a href="https://www.mygames.com/backup/review/' + value + '"  target="_blank" class ="btn btn-primary btn-sm">Review</a>';
  }
});

$('.restore').popover({
  trigger: 'focusin',
  html: true,
  placement: 'bottom',
  title: 'Restore Folder',
  content: function() {
    const value = $('#mygame').val()

    return '<a href="https://www.mygames.com/restore/accept/' + value + '" target="_blank" class ="btn btn-info btn-sm">Accept</a>&nbsp;&nbsp;<a href="https://www.mygames.com/restore/review/' + value + '"  target="_blank" class ="btn btn-primary btn-sm">Review</a>'
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div style="padding-bottom:10px;">
  <select name="mygame" id="mygame" style="width:16em;">
    <option value="choose">-- Choose Game --</option>
    <option value="name1">Name of Game 1</option>
    <option value="name2">Name of Game 2</option>
    <option value="name3">Name of Game 3</option>
    <option value="name4">Name of Game 4</option>
    <option value="name5">Name of Game 5</option>
    <option value="name6">Name of Game 6</option>
    <option value="name7">Name of Game 7</option>
    <option value="name8">Name of Game 8</option>
  </select>
</div>
<div style="float:left;">
  <button class="restore" id="restore">Restore Folder </button>
  <button class="backup" id="backup">Backup Folder</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

选择选项和弹出框-始终获取最后选择的值

1 个答案: