如何使用jQuery一起显示选定的值? [英] How can I display selected values together using jQuery?
本文介绍了如何使用jQuery一起显示选定的值?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一些下拉字段，它们触发一个允许用户输入值的弹出窗口.我希望此值显示在此处的按钮中:
I have some dropdown fields which trigger a popup that allows the user to enter a value. I want this value to appear in the button here:
<button type="button" id="moving_average_output" name="moving_average_output" class="btn-primary col-xl-12 form-control">Value should appear here</button>
我能够将最近选择的值显示在<button>中，但是我无法将所有三个值一起显示.这是完整的源代码:
I'm able to get the most recently selected value to appear in the <button>, but I can't get all three values to appear together. Here is the full source code:
$("#comparator_indicator").on('change', function() {
var comparator_value = $(this).val();
$("#moving_average_output").text(comparator_value);
});
$("#right_side_indicator_select-me").on('change', function() {
//alert($(this).val());
if ($(this).val() == 1) {
$("#myModal_first").modal('show');
}else if($(this).val() == 2) {
$('#simple_moving_average').val('');
$("#myModal_second").modal('show');
}
});
$("#movingaveragebutton").on('click', function(event) {
event.preventDefault();
simplemovingaverage = $("#simple_moving_average").val();
$("#moving_average_output").text(simplemovingaverage);
});
$("#exponentialbutton").on('click', function(event) {
event.preventDefault();
exponentialstring = $("#exponentialstring").val();
exponentialnumber = $("#exponentialnumber").val();
$("#moving_average_output").text(exponentialstring+','+exponentialnumber);
});
/* ----------------------right side -------------------------------------------*/
$("#left_indicator_side_select-me").on('change', function() {
//alert($(this).val());
if ($(this).val() == 1) {
$("#myModal_first").modal('show');
}else if($(this).val() == 2) {
$('#simple_moving_average').val('');
$("#myModal_second").modal('show');
}
});
$("#movingaveragebutton").on('click', function(event) {
event.preventDefault();
simplemovingaverage = $("#simple_moving_average").val();
$("#moving_average_output").text(simplemovingaverage);
});
$("#exponentialbutton").on('click', function(event) {
event.preventDefault();
exponentialstring = $("#exponentialstring").val();
exponentialnumber = $("#exponentialnumber").val();
$("#moving_average_output").text(exponentialstring+','+exponentialnumber);
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="row block-9">
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Right Side Indicator:</label>
<select class="form-control" id="right_side_indicator_select-me" name="right_side_indicator_select-me">
<option>Select</option>
<option value="1">Moving Average</option>
<option value="2">Exponential Moving Average</option>
</select>
</div>
</div>
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Comparator:</label>
<select class="form-control" id="comparator_indicator" name="comparator_indicator">
<option>Select</option>
<option value="=">=</option>
<option value=">">></option>
<option value="<"><</option>
</select>
</div>
</div>
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Left Side Indicator:</label>
<select class="form-control" id="left_indicator_side_select-me" name="left_indicator_side_select-me">
<option>Select</option>
<option value="1">Moving Average</option>
<option value="2">Exponential Moving Average</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="sel1">Selected values</label>
<button type="button" id="moving_average_output" name="moving_average_output" class="btn-primary col-xl-12 form-control">value will display here</button>
</div>
<div class="form-group">
<div id="myModal_first" class="modal fade" role="dialog">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-content">
<div class="modal-body">
<input type="text" name="simple_moving_average" id="simple_moving_average" class="form-control" placeholder="TEXT">
</div>
<button type="button" id="movingaveragebutton" name="movingaveragebutton" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;" data-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
<div class="form-group">
<div id="myModal_second" class="modal fade" role="dialog">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-content">
<div class="modal-body">
<div class="row block-9">
<div class="col-md-6 pr-md-6">
<div class="form-group">
<select class="form-control" id="exponentialstring" name="exponentialstring">
<option>SELECT THE OPTIONS</option>
<option value="open">OPEN</option>
<option value="close">CLOSE</option>
<option value="low">LOW</option>
<option value="high">HIGH</option>
</select>
</div>
</div>
<div class="col-md-6 pr-md-6">
<div class="form-group">
<select class="form-control" id="exponentialnumber" name="exponentialnumber">
<option>SELECT THE OPTIONS</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
</div>
</div>
</div>
<button type="button" id="exponentialbutton" name="exponentialbutton" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;" data-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
如果运行示例，您将看到在<button>中仅显示最近输入的值.
If you run the example, you'll see that only the most recently entered value is displayed in the <button>.
推荐答案
好的，我认为我已经正确地重构了这一点，我更改了指标的顺序，因为它们似乎倒退了:
OK I think I have this refactored correctly, I changed the order of your indicators because they seemed backwards:
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Left Side Indicator:</label>
<select class="form-control" id="left_indicator_side_select-me" name="left_indicator_side_select-me">
<option>Select</option>
<option value="1">Moving Average</option>
<option value="2">Exponential Moving Average</option>
</select>
</div>
</div>
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Comparator:</label>
<select class="form-control" id="comparator_indicator" name="comparator_indicator">
<option>Select</option>
<option value="=">=</option>
<option value=">">></option>
<option value="<"><</option>
</select>
</div>
</div>
<div class="row block-9">
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Right Side Indicator:</label>
<select class="form-control" id="right_side_indicator_select-me" name="right_side_indicator_select-me">
<option>Select</option>
<option value="1">Moving Average</option>
<option value="2">Exponential Moving Average</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="sel1">Selected values</label>
<button type="button" id="moving_average_output" name="moving_average_output" class="btn-primary col-xl-12 form-control">Value goes here</button>
</div>
这是重构的JS(请注意，由于不需要它们，我从示例中删除了最后两个事件处理程序):
And here is the refactored JS (note that I removed the last two event handlers from your example, as they were not needed):
const output = {
left: '',
compare: '',
right: '',
toString: function() {
return `${this.left} ${this.compare} ${this.right}`;
},
};
let sideIndicator = '';
$("#left_indicator_side_select-me").on('change', function() {
sideIndicator = 'left';
if ($(this).val() == 1) {
$("#myModal_first").modal('show');
}else if($(this).val() == 2) {
$('#simple_moving_average').val('');
$("#myModal_second").modal('show');
}
});
$("#comparator_indicator").on('change', function() {
output.compare = $(this).val();
$("#moving_average_output").text(output.toString());
});
$("#right_side_indicator_select-me").on('change', function() {
sideIndicator = 'right';
if ($(this).val() == 1) {
$("#myModal_first").modal('show');
}else if($(this).val() == 2) {
$('#simple_moving_average').val('');
$("#myModal_second").modal('show');
}
});
$("#movingaveragebutton").on('click', function(event) {
event.preventDefault();
output[sideIndicator] = $("#simple_moving_average").val();
$("#moving_average_output").text(output.toString());
});
$("#exponentialbutton").on('click', function(event) {
event.preventDefault();
exponentialstring = $("#exponentialstring").val();
exponentialnumber = $("#exponentialnumber").val();
output[sideIndicator] = exponentialstring + ',' + exponentialnumber;
$("#moving_average_output").text(output.toString());
});
这是一个 JSFiddle ，您可以在其中使用它并查看该解决方案是否满足您的需求.
Here's a JSFiddle where you can work with it and see if this solution meets your needs.
简要说明
我创建了一个对象output，该对象将保存#moving_average_output <button>元素的文本.这些属性将保存页面上具有相同名称的元素中的文本:
I created an object, output which will hold the text of the #moving_average_output <button> element. The properties will hold the text from the elements of the same name on the page:
const output = {
left: '',
compare: '',
right: '',
toString: function() {
return `${this.left} ${this.compare} ${this.right}`;
},
};
因此，output.left将具有来自此HTML元素的文本内容:
So, output.left will have the text content from this HTML element:
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Left Side Indicator:</label>
<select class="form-control" id="left_indicator_side_select-me" name="left_indicator_side_select-me">
<option>Select</option>
<option value="1">Moving Average</option>
<option value="2">Exponential Moving Average</option>
</select>
</div>
</div>
这可以通过在全局范围内创建变量sideIndicator并将其设置为在更改"事件处理程序中单击的下拉菜单的一侧来工作.这是#left_indicator_side_select-me事件处理程序的示例:
This works by creating a variable sideIndicator in the global scope and setting it to the side of the dropdown that was clicked in your 'change' event handlers. Here is the example for the #left_indicator_side_select-me event handler:
let sideIndicator = '';
$("#left_indicator_side_select-me").on('change', function() {
sideIndicator = 'left';
if ($(this).val() == 1) {
$("#myModal_first").modal('show');
}else if($(this).val() == 2) {
$('#simple_moving_average').val('');
$("#myModal_second").modal('show');
}
});
然后我们可以使用括号表示法将#simple_moving_average按钮的值以及#exponentialstring和#exponential数字动态分配给output对象中的正确边:
We can then use bracket notation to dynamically assign the value of the #simple_moving_average button and the #exponentialstring and #exponential number to the correct side in the output object:
$("#movingaveragebutton").on('click', function(event) {
event.preventDefault();
output[sideIndicator] = $("#simple_moving_average").val();
$("#moving_average_output").text(output.toString());
});
$("#exponentialbutton").on('click', function(event) {
event.preventDefault();
exponentialstring = $("#exponentialstring").val();
exponentialnumber = $("#exponentialnumber").val();
output[sideIndicator] = exponentialstring + ',' + exponentialnumber;
$("#moving_average_output").text(output.toString());
});
对output.toString()的调用将返回正确格式的字符串作为按钮文本.
The call to output.toString() will return the correctly formatted string as the button text.
另一种可能的解决方案
顺便说一句，您正在版本中做一些重复的事情，在上面的重构中我没有做过更改.如果我正在从事这个项目，那么我在JS中所做的工作会有所不同.这是另一种看待事物的方式:
As an aside, you are doing some repetitive things in your version, which I didn't change in my refactor above. If I were approaching this project, I would do things a little differently in my JS. Here's another way of looking at things:
const movingAverageOutput = document.getElementById('moving_average_output');
const simpleMovingAverage = document.getElementById('simple_moving_average');
const output = {
left: '',
compare: '',
right: '',
toString: function() {
return `${this.left} ${this.compare} ${this.right}`;
},
};
const triggerModal = (val) => {
if (val == 1) return $("#myModal_first").modal('show');
if (val == 2) {
simpleMovingAverage.value = '';
$("#myModal_second").modal('show');
}
};
let sideIndicator = '';
const setSideIndicator = (id) => {
if (id === 'left_indicator_side_select-me') return sideIndicator = 'left';
if (id === 'right_side_indicator_select-me') return sideIndicator = 'right';
};
window.addEventListener('change', function(e) {
triggerModal(e.target.value);
setSideIndicator(e.target.id);
});
$("#comparator_indicator").on('change', function() {
output.compare = $(this).val();
movingAverageOutput.textContent = output.toString();
});
$("#movingaveragebutton").on('click', function(event) {
output[sideIndicator] = simpleMovingAverage.value;
movingAverageOutput.textContent = output.toString();
});
$("#exponentialbutton").on('click', function(event) {
exponentialstring = $("#exponentialstring").val();
exponentialnumber = $("#exponentialnumber").val();
output[sideIndicator] = exponentialstring + ',' + exponentialnumber;
movingAverageOutput.textContent = output.toString();
});
如果您想弄混它，这是该版本的 JSFiddle .
And here is a JSFiddle of that version if you want to mess around with it.
这篇关于如何使用jQuery一起显示选定的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
