Question

我有这样的html：

<div class="Proizvod" value="131" onclick="IdiNaProizvod(this)">
    <div class="ProizvodInner">
        <p class="KatBr">10-56 L   </p>
        <p class="Naziv">TN 35  SRAF  1000/1 </p>
    </div>
</div>

<div class="Proizvod" value="131" onclick="IdiNaProizvod(this)">
    <div class="ProizvodInner">
        <p class="KatBr">10-88 L   </p>
        <p class="Naziv">TN 70  SRAF  1000/1 </p>
    </div>
</div>

现在我有input个元素，该元素带有onclick方法，该方法运行应执行以下操作的功能：

检查div中类别为Proizvod的HTML部分是否包含输入，然后是否将其更改为类别为Proizvod的div的css。

因此，假设我输入了88，就可以了

<div class="Proizvod" value="131" onclick="IdiNaProizvod(this)"> /* There is no html part here - skip */
    <div class="ProizvodInner"> /* There is no html part here - skip */
        <p class="KatBr">10-56 L   </p> /* There is html part here - it doesn't contain 88 - skip*/
        <p class="Naziv">TN 35  SRAF  1000/1 </p> /* There is html part here - it doesn't contain 88 - skip*/
    </div>
</div>

<div class="Proizvod" value="131" onclick="IdiNaProizvod(this)"> /* There is no html part here - skip */
    <div class="ProizvodInner"> /* There is no html part here - skip */
        <p class="KatBr">10-88 L   </p> /* There is html part here - it does contain 88 - change this div with class Proizvod display to none */

        <p class="Naziv">TN 70  SRAF  1000/1 </p>
    </div>
</div>

我尝试过这样的事情：

function Filter(element)
{
    $t = $(element).val();
    $("div:contains($t)").css( "display", "none" );
}

但是什么也没有发生，也没有错误出现。

Answer 1

$t在您的选择器字符串中是毫无意义的，它就像文字字符串一样。像PHP这样的语言中，在JS中没有字符串插值法会将其值放入最终字符串中。

改为尝试$("div:contains(" + $t + ")")。

此外，您的代码当前定位到所有div，而不仅仅是问题中提到的“ Proizvod”类。

以下是一个演示，它修复了上述两个问题，并且每次都重置了过滤器，以便使先前过滤器操作隐藏的结果再次可见：

$(function() {
  $("#FilterButton").click(function() {
    $t = $("#Filter").val();
    $(".Proizvod").css("display", "block"); //reset previous filter
    $(".Proizvod:contains(" + $t + ")").css("display", "none"); //apply new filter
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Proizvod" value="131" onclick="IdiNaProizvod(this)">
  <div class="ProizvodInner">
    <p class="KatBr">10-56 L </p>
    <p class="Naziv">TN 35 SRAF 1000/1 </p>
  </div>
</div>

<div class="Proizvod" value="131" onclick="IdiNaProizvod(this)">
  <div class="ProizvodInner">
    <p class="KatBr">10-88 L </p>
    <p class="Naziv">TN 70 SRAF 1000/1 </p>
  </div>
</div>
<input type="text" id="Filter" /><button type="button" id="FilterButton">Filter</button>

Answer 2

如果要使该语法有效，则需要使用Template Literals

$(`div:contains(${$t})`).css( "display", "none" );

Answer 3

问题在于选择div

您需要为$("div:contains(" + $t + ")")申请contains。

请检查下面的代码，我删除了一些额外的代码，并应用了类边框，以便您有更多的想法。

function Filter() {
    $("body > div").removeClass('YesProizvod').addClass('Proizvod');//this is for reset all

    $t = $('#myFilter').val();
    $("body > div:contains(" + $t + ")").removeClass('Proizvod').addClass('YesProizvod');
}

.Proizvod {
    border: solid 2px green;
    margin-bottom: 10px;
}

.YesProizvod {
    border: solid 2px red;
    margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="myFilter" value="88" />
<button onclick="Filter()">Click here to filter</button>
<br><br>
<div class="Proizvod" value="131">
    <div class="ProizvodInner">
        <p class="KatBr">10-56 L   </p>
        <p class="Naziv">TN 35  SRAF  1000/1 </p>
    </div>
</div>

<div class="Proizvod" value="131">
    <div class="ProizvodInner">
        <p class="KatBr">10-88 L   </p>
        <p class="Naziv">TN 70  SRAF  1000/1 </p>
    </div>
</div>

我希望这会有所帮助。

如果div包含某些内容，请更改父div的CSS

3 个答案: