show div where its element has attribute title = value-CodePudding

im trying to show a "<div >" where his child has tag with attr. title = productTrim variable. here is a demo:

$(function() {
        $('.icon--drop').click(function (event) {
            // The URL changed...
            console.log("url changed");
            
            var productName = $('.super-color-variant[style="display: block;"] .product--title').text();
            var productTrim = $.trim(productName);

            var BundleName = $(`.bundle--product-name a[title='${productTrim}']`).attr('title');
            console.log(productTrim);
            console.log("and");
            console.log(BundleName);

            if(productTrim === BundleName){
                $('.bundle--form').hide()
                $(".bundle--form").find(`div a[title='${productTrim}']`).show();
                console.log("are same")
            }else{
                $('.bundle--form').hide()
                console.log("are not same")
            }
        });
        
});

svg#Ebene_1{
  width: 50px;
    height: 50px;
}
.demo{
  padding: 10px;
  border: 2px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  data-super-variant="magenta" style="display: block;">
<h1  itemprop="name">
Toner magenta ersetzt Lexmark 700X3
</h1>
</div>

<a href="#magenta"  data-super-variant="magenta" title="black">
<i >
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 119.39 130">
<path  d="M75.67,41.8,58.87,10.42,42.06,41.8C33.2,58.43,24.75,70.71,24.75,86.24c0,20.13,17.65,33.35,34.12,33.35S93,106.32,93,86.24C93,70.71,84.54,58.43,75.67,41.8Z"></path>
</svg>
</i>
</a>
<div >
  <div >
    <div >
    <a href="#" title="Toner magenta ersetzt Lexmark 700X3">1x Toner magenta ersetzt Lexmark 700X3</a>
    </div>
  </div>
</div>

<div >
  <div >
    <div >
    <a href="#" title="original yellow ersetzt Lexmark 700X7">1x original yellow ersetzt Lexmark 700X7</a>
    </div>
  </div>
</div>

basically, when you click on the color drop, only the bundle--form that matches the title should be shown. how can I do that? I've tried many ways, can anyone link an article or give a suggestion? jq or js no problem, thanks :).

CodePudding user response：

You tell jQuery to show the a tag within a .bundle--form. But the .bundle--form is not shown and thus the browser will not render anything in it.

I believe you meant to show the .bundle-form where the a tag with that specific title is in.

I changed this:

$(".bundle--form").find(`div a[title='${productTrim}']`).show();

to this:

$(`.bundle--form a[title='${productTrim}']`).closest('.bundle--form').show();

jQuery uses the recently selected element. What you call show on was the a tag, when in fact you probably wanted the closest .bundle--form.
See updated snippet below.

$(function() {
        $('.icon--drop').click(function (event) {
            // The URL changed...
            console.log("url changed");
            
            var productName = $('.super-color-variant[style="display: block;"] .product--title').text();
            var productTrim = $.trim(productName);

            var BundleName = $(`.bundle--product-name a[title='${productTrim}']`).attr('title');
            console.log(productTrim, "and", BundleName);

            if(productTrim === BundleName){
                $('.bundle--form').hide()
                $(`.bundle--form a[title='${productTrim}']`).closest('.bundle--form').show();
                console.log("are same")
            }else{
                $('.bundle--form').hide()
                console.log("are not same")
            }
        });
        
});

svg#Ebene_1{
  width: 50px;
    height: 50px;
}
.demo{
  padding: 10px;
  border: 2px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  data-super-variant="magenta" style="display: block;">
<h1  itemprop="name">
Toner magenta ersetzt Lexmark 700X3
</h1>
</div>

<a href="#magenta"  data-super-variant="magenta" title="black">
<i >
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 119.39 130">
<path  d="M75.67,41.8,58.87,10.42,42.06,41.8C33.2,58.43,24.75,70.71,24.75,86.24c0,20.13,17.65,33.35,34.12,33.35S93,106.32,93,86.24C93,70.71,84.54,58.43,75.67,41.8Z"></path>
</svg>
</i>
</a>
<div >
  <div >
    <div >
    <a href="#" title="Toner magenta ersetzt Lexmark 700X3">1x Toner magenta ersetzt Lexmark 700X3</a>
    </div>
  </div>
</div>

<div >
  <div >
    <div >
    <a href="#" title="original yellow ersetzt Lexmark 700X7">1x original yellow ersetzt Lexmark 700X7</a>
    </div>
  </div>
</div>