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

Question

这是我的代码选择选项和使用 html 和 jquery 的弹出框问题：当我选择一个选项时，它可以工作，但是当我选择另一个选项时，它总是获得最后选择的值。前任。如果我选择游戏名称 4 - href 链接的值必须是 name4https://www.mygames.com/restore/accept/'+value+https://www.mygames.com/restore/accept/name4但是当我选择另一个选项时，如 Name of Game 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>提琴手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>