Question

我在另一个主题（Show text based on option selected in dropdown）中找到了一个有用的jquery代码，以根据下拉选择显示文本。

但是，我的ID有空格，而代码对此无效。我没有完全访问shopify代码/后端的权限以消除空格（为进一步说明：shopify将只使用下拉文本的名称作为值，因此使用空格） < / p>

谁能帮助您修复下面的代码？

非常感谢！！

$('p').hide();
$('#14 Days').show();
$('select').change(function() {
$('p').hide();
  var a = $(this).val();
  $("#" + a).show();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select class="bootstrap-select">
  <option value="14 Days" selected="selected">Feature 1</option>
  <option value="28 Days">Feature 2</option>
</select>
<div>
  <p id="14 Days">Save 25% with the 28 Days size!</p>
</div>
<div>
  <p id="28 Days">Great! You are now saving 25%!</p>
</div>

JS FIDDLE

Answer 1

您可以使用CSS attribute selectors作为id选择元素的另一种方法。

CSS选择器#myId将选择与[id="myId"]相同的元素。它们实际上是相同的，但#选择器的单个差异具有更大的specificity。

// So instead of using
$("#14 days")  // or
$("#" + a)

// Try using
$("[id='14 days']")  // and
$("[id='" + a + "']")

Answer 2

我不知道您的ID为什么有空格。但是，如果这是您无法解决的事情，则绝对需要一个解决方案。

按如下所示更改脚本。

<script>
$('p').hide();

var a = $(".bootstrap-select").val();
$("div > p").each(function(i){
   if(this.id == a){
    $(this).show();
  }
});

$('select').change(function() {
    $('p').hide();
    a = $(this).val();
    console.log(a);
    $("div > p").each(function(i){
      if(this.id == a){
        $(this).show();
      }
 });
});
</script>

改为使用此

<script>
var val = $('.single-option-selector').val();
var sid = val.split(" ").join("_");
$("#"+sid).css("color","black");
$(document).ready(function(){
$('.single-option-selector').change(function(){
  $(".white-hidden-text p").css("color","white");
  val = $(this).val();
  sid = val.split(" ").join("_");
  console.log(sid);
  $("#"+sid).css("color","black");
});
});
</script>

如何使用下拉菜单的jquery选择ID（html标记）中带有空格的值？

2 个答案: