javascript - 选择选项和弹出框 - 始终获取最后选择的值
问题描述
这是我的代码选择选项和使用 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> <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> <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>
提琴手
解决方案
不要在每次选择更改时初始化插件,而是使用内容函数并在该函数中获取选择的值,并且只初始化一次插件
$('.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> <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> <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>
推荐阅读
- jmeter - 线程的 Beanshell 值不是随机的
- reactjs - 使用 Bootstrap 垂直对齐
- c++ - 如何在不视觉上使用滚动条的情况下更改视图
- java - java没有进入循环
- node.js - 带有 UnhandledPromiseRejectionWarning 的 Firebase 消息发送()错误
- css - CSS max-width 和 calc() 在这里真正做了什么?
- excel - 宏复制和粘贴并按前 3 个值(或更多)排序
- angular - 如何在 Angular 中更改内联 svg 的颜色?
- python - pywinauto - 如何选择菜单项?(UIA 后端)
- sql - 将编码列添加到现有表