2016-12-05 191 views
0

我試圖添加一個類(添加紅色邊框)到另一個div內的圖像。我需要使用data-attr來獲取它。我已經做的這第一部分,這裏是我的代碼:如何選擇嵌套在另一個元素中的元素?

HTML:

<div class="delivery-method col-lg-5"> 
<div class="letter row" data-delivery-method="letter" > 
    <div class="col-lg-4"> 
    <input type="radio" name="choose-delivery-metod" value="box" checked> 
    <img src="{url}../../../assets/website/img/letter.png" alt="Paczka"> 
    </div> 
    <div class="col-lg-8"> 
    <span class="deliver-method-name">KOPERTA</span> 
    <span>JUŻ OD 11.48ZŁ</span> 
    </div> 
</div> 
<div class="box row" data-delivery-method="box"> 
    <div class="col-lg-4"> 
    <input type="radio" name="choose-delivery-metod" value="letter"> 
    <img src="{url}../../../assets/website/img/box.png" alt="List"> 
    </div> 
    <div class="col-lg-8"> 
    <span class="deliver-method-name">PACZKA</span> 
    <span> JUŻ OD 11.48ZŁ </span> 
    </div> 
</div> 

的JavaScript:

$("div[data-delivery-method]").click(function(){ 

    var idValue= $(this).attr("data-delivery-method"); 
    var objectWithIdValue = $(this).find("[data-delivery-method='" + idValue + "']"); 

    //not working 
    $(objectWithIdValue).find("img").click(function(){ 
     console.log(this); 
    }); 
    //not working -end 

}); 
+2

.find在選擇器中查找_inside_元素。在你的情況下,'this' _is_是具有data-attribute的元素,並且它中沒有元素也具有該屬性,所以它不會找到任何東西。 '$(「img」,this)'應該得到你的圖像,而不是'$(objectWithIdValue).find(「img」)'。另外,我假設你意識到你的代碼沒有設置任何類型的邊框或類。 – ADyson

+0

嘗試'var objectWithIdValue = $(this).is(「[data-delivery-method ='」+ idValue +「'」))? $(this):「Not this element」'看看它是否得到正確的元素 – sTx

+0

它的工作原理!謝謝! – blyszczacaOsmiornica

回答

1

添加$(this).find("img").click(function(){填補找到當前中img標籤selected div

$("div[data-delivery-method]").click(function(){ 
 

 
    //not working 
 
    $(this).find("img").click(function(){ 
 
     $(this).addClass("red"); 
 
     console.log(this); 
 
    }); 
 
    //not working -end 
 

 
});
.red{ 
 
    border:solid 1px red; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="delivery-method col-lg-5"> 
 
<div class="letter row" data-delivery-method="letter" > 
 
    <div class="col-lg-4"> 
 
    <input type="radio" name="choose-delivery-metod" value="box" checked> 
 
    <img src="{url}../../../assets/website/img/letter.png" alt="Paczka"> 
 
    </div> 
 
    <div class="col-lg-8"> 
 
    <span class="deliver-method-name">KOPERTA</span> 
 
    <span>JUŻ OD 11.48ZŁ</span> 
 
    </div> 
 
</div> 
 
<div class="box row" data-delivery-method="box"> 
 
    <div class="col-lg-4"> 
 
    <input type="radio" name="choose-delivery-metod" value="letter"> 
 
    <img src="{url}../../../assets/website/img/box.png" alt="List"> 
 
    </div> 
 
    <div class="col-lg-8"> 
 
    <span class="deliver-method-name">PACZKA</span> 
 
    <span> JUŻ OD 11.48ZŁ </span> 
 
    </div> 
 
</div>

+0

這很好,如果他不需要'idValue'因爲某個特定的原因 – sTx

+0

yaah ...他在同一個元素中比較它的'attr'。他可能會對'$(this)'的用法感到困惑。這就是爲什麼我解釋這個簡單的方法 – jafarbtech

相關問題