我正在建立一个网站,该网站应该是销售眼镜的商店。 用户必须从两种选择类型输入中为每只眼睛选择其处方值,以便能够为他们选择合适的镜片。
我正试图找出如何使用Jquery / Javascript比较两只眼睛的值,因为需要根据最高的显示更多的选项。
这是我到目前为止所拥有的。每个输入都独立于其他输入工作,我不知道该如何解决。
$(function () {
$("#selection_1, #selection_2").change(function() {
var val = $(this).val();
if(val >="00.00" && val <="01.00" || val <="-01.00" && val >="-00.25" ) {
$("#product_b").hide();
}
else {
$("#product_b").show()
};
if(val >="01.25" && val <="02.00" || val <="-02.00" && val >="-01.25" ) {
$("#product_a").hide();
}
else {
$("#product_a").show();
};
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container ">
<div class="form-group col-md-6">
<label class="control-label" for="selection_1">Selection 1</label>
<select class="my-form-control" id="selection_1" name="right eye">
<option value="default"disabled>choose...</option>
<option value="-02.00">-02.00</option>
<option value="-01.75">-01.75</option>
<option value="-01.50">-01.50</option>
<option value="-01.25">-01.25</option>
<option value="-01.00">-01.00</option>
<option value="-00.75">-00.75</option>
<option value="-00.50">-00.50</option>
<option value="-00.25">-00.25</option>
<option value="00.00" selected>00.00</option>
<option value="00.25">00.25</option>
<option value="00.50">00.50</option>
<option value="00.75">00.75</option>
<option value="01.00">01.00</option>
<option value="01.25">01.25</option>
<option value="01.50">01.50</option>
<option value="01.75">01.75</option>
<option value="02.00">02.00</option>
</select>
</div>
<div class="form-group col-md-6">
<label class="control-label" for="selection_2">Selection 2</label>
<select class="my-form-control" id="selection_2" name="right eye">
<option value="default" disabled>choose...</option>
<option value="-02.00">-02.00</option>
<option value="-01.75">-01.75</option>
<option value="-01.50">-01.50</option>
<option value="-01.25">-01.25</option>
<option value="-01.00">-01.00</option>
<option value="-00.75">-00.75</option>
<option value="-00.50">-00.50</option>
<option value="-00.25">-00.25</option>
<option value="00.00"selected>00.00</option>
<option value="00.25">00.25</option>
<option value="00.50">00.50</option>
<option value="00.75">00.75</option>
<option value="01.00">01.00</option>
<option value="01.25">01.25</option>
<option value="01.50">01.50</option>
<option value="01.75">01.75</option>
<option value="02.00">02.00</option>
</select>
</div>
</div>
<div class="container">
<div id="product_a" class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
<label class="form-check-label" for="product_a">
Product A
</label>
</div>
<div id="product_b" class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="product_b">
Product B
</label>
</div>
</div>
这是我需要完成的工作: 如果#selection_1或#selection_2在1.00和-1.00之间,则应显示#product_a。 如果#selection_1或#selection_2在1.00和2.00之间,以及-1.00和-2.00之间,则应显示#product_b。
以下是它们应如何协同工作的示例: 如果selection_1在1.00和2.00之间,并且selection_2在1.00和-1.00之间,则应显示#product_b。最高的应该是那个 考虑。
我希望有人能帮助我!谢谢
答案 0 :(得分:1)
在比较数字值时,您需要parse
将值转换为数字类型,在这种情况下,您应该parseFloat()
将这些值计算之前。
从您的段落来看,您的条件对我来说似乎有些复杂,但我仍然尽我所能实施。希望这将帮助您根据需要实施其余部分。
这是代码段。
$(function() {
$("#selection_1, #selection_2").change(function() {
var val1 = parseFloat($('#selection_1').val());
var val2 = parseFloat($('#selection_2').val());
if ((val1 => -1.0 && val1 <= 1.0) || (val2 >= -1.0 && val2 <= 1.0)) {
$('#product_a').show();
$('#product_b').hide();
}
if ((val1 >= 1.0 && val1 <= 2.0) || (val2 >= 1.0 && val2 <= 2.0) || (val1 >= -2.0 && val1 <= -1.0) || (val2 >= -2.0 && val2 <= -1.0)) {
$('#product_a').hide();
$('#product_b').show();
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container ">
<div class="form-group col-md-6">
<label class="control-label" for="selection_1">Selection 1</label>
<select class="my-form-control" id="selection_1" name="right eye">
<option value="default" disabled>choose...</option>
<option value="-02.00">-02.00</option>
<option value="-01.75">-01.75</option>
<option value="-01.50">-01.50</option>
<option value="-01.25">-01.25</option>
<option value="-01.00">-01.00</option>
<option value="-00.75">-00.75</option>
<option value="-00.50">-00.50</option>
<option value="-00.25">-00.25</option>
<option value="00.00" selected>00.00</option>
<option value="00.25">00.25</option>
<option value="00.50">00.50</option>
<option value="00.75">00.75</option>
<option value="01.00">01.00</option>
<option value="01.25">01.25</option>
<option value="01.50">01.50</option>
<option value="01.75">01.75</option>
<option value="02.00">02.00</option>
</select>
</div>
<div class="form-group col-md-6">
<label class="control-label" for="selection_2">Selection 2</label>
<select class="my-form-control" id="selection_2" name="right eye">
<option value="default" disabled>choose...</option>
<option value="-02.00">-02.00</option>
<option value="-01.75">-01.75</option>
<option value="-01.50">-01.50</option>
<option value="-01.25">-01.25</option>
<option value="-01.00">-01.00</option>
<option value="-00.75">-00.75</option>
<option value="-00.50">-00.50</option>
<option value="-00.25">-00.25</option>
<option value="00.00" selected>00.00</option>
<option value="00.25">00.25</option>
<option value="00.50">00.50</option>
<option value="00.75">00.75</option>
<option value="01.00">01.00</option>
<option value="01.25">01.25</option>
<option value="01.50">01.50</option>
<option value="01.75">01.75</option>
<option value="02.00">02.00</option>
</select>
</div>
</div>
<div class="container">
<div id="product_a" class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
<label class="form-check-label" for="product_a">
Product A
</label>
</div>
<div id="product_b" class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="product_b">
Product B
</label>
</div>
</div>