Question

如果更改了选项并且文字包含12/31/2017

，我想隐藏文字

document.getElementById('search-state').onchange = function() {
jQuery("h5:contains('12/31/2018')").css('display', 'none');	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select id="search-state" name="search-state">
                                <option value="chooseState">Please choose a State</option>
                                <option value="AK">AK - Alaska</option>
                                <option value="AL">AL - Alabama</option>
                                <option value="AR">AR - Arkansas</option>
</select>
<h5>12/31/2017</h5>
<h5>02/02/2018</h5>

Answer 1

使用$("h5").first()并将document.getElementById替换为$。请记住，您正在使用jQuery。 $("h5").first()first()会获取代码h5的第一个元素。您也可以使用$("h5:contains('12/31/2017')")。

$('#search-state').on("change",function() {
  $( "h5" ).first().css( "display", "none" );
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select id="search-state" name="search-state">
                                <option value="chooseState">Please choose a State</option>
                                <option value="AK">AK - Alaska</option>
                                <option value="AL">AL - Alabama</option>
                                <option value="AR">AR - Arkansas</option>
</select>
<h5>12/31/2017</h5>
<h5>02/02/2018</h5>

Answer 2

这是一个解决所有错别字的答案。您还在寻找在您的任何标题元素中都不存在的内容（您的HTML已<h5>12/31/2017</h5>但您正在寻找12/31/2018）。

＆＃13;

$('#search-state').change(function() {
  $("h5:contains('12/31/2017')").hide();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select id="search-state" name="search-state">
                                <option value="chooseState">Please choose a State</option>
                                <option value="AK">AK - Alaska</option>
                                <option value="AL">AL - Alabama</option>
                                <option value="AR">AR - Arkansas</option>
</select>
<h5>12/31/2017</h5>
<h5>02/02/2018</h5>

＆＃13;

Answer 3

我不太了解jQuery。我发现你正在寻找12/31/2018而不是12/31/2017。这可能会导致您的代码无效。

至少你有一个纯粹的javascript解决方案。对不起，但我的jQuery知识很差。

document.getElementById("search-state").onchange = function() {
    var h5Array = document.getElementsByTagName("h5");

    for (var i = 0; i < h5Array.length(); i++) {
        if (h5Array[i].innerHTML == "12/31/2017") {
            h5Array[i].style.display = "none";
        }
    }
}

Answer 4

注意：当您查找特定文本时，您不希望使用包含，因为它被认为对于精确搜索而言效率低下。此外，您没有指出要显示或隐藏的内容。但切换是一个很好的功能，仅用于控制页面上内容的可见性。如下所示，您可以在切换功能中添加条件。

您可以在jQuery中尝试toggle命令：

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){

  $("#search-state").change(function(){    
       $("#answer").toggle($("h5").text()==="12/31/2017"); 
       // if you're just trying to hide first h5
       // $("h5").first().toggle($(this).text()==="12/31/2017");           
  });

});
</script>
<select id="search-state" name="search-state">
                            <option value="chooseState">Please choose a State</option>
                            <option value="AK">AK - Alaska</option>
                            <option value="AL">AL - Alabama</option>
                            <option value="AR">AR - Arkansas</option>
</select>
<h5>12/31/2017</h5>
<h5>02/02/2018</h5>

<p id="answer">Hide or show this text</p>

如果选择已更改，则隐藏包含特定文本的<h5>

4 个答案: