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

Question

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

问题:当我选择一个选项时，它可以工作，但是当我选择另一个选项时，它总是获取最后选择的值。

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

https://www.mygames.com/restore/accept/ '+值+
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

不要在每次选择更改时都初始化插件，而是使用内容函数并在该函数中获取选择的值，并且仅初始化插件一次

$('.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>