如何在class元素中調用id元素？

Question

我該如何製作這個$(".spinner #6").hide();？有沒有辦法做到這一點？因爲如果我使用像這樣$(".spinner").attr("id", yes).show();或$(".spinner").attr("id", 6).show(); ..那麼所有id =「」，都會出現。如果我使用這個代碼$(".spinner").find("id", yes).css("display", "block");什麼都沒有發生。有辦法處理這種事情嗎？

<div class="icon-groupx" id="6"> 
    <span class="ss-icon spinner" id="6" style"display:none;"></span> 
    <span class="ss-icon ss-heart-no" id="6" style"display:none;"></span> 
    <span class="ss-icon ss-heart-yes" id="6"></span> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
$(".ss-heart-yes").click(function() { 
     var idclass=$(this).attr("id"); 
     var dataString = 'idclass='+ idclass; 

     $(".spinner #6").show(); 
     $(".ss-heart-yes #6").hide(); 

     $.ajax({ 
     type: "POST", 
     url: "processed.php", 
     data: dataString, 
     cache: false, 
     success: function(result){ 
       var result=trim(result); 
       if(result=='OK'){ 

        $(".ss-heart-no #6").show(); 
        $(".ss-heart-yes #6").hide(); 
        $(".spinner #6")hide(); 
        ///// OR ///// 
        $(".ss-heart-no #idclass").show(); 
        $(".ss-heart-yes #idclass").hide(); 
        $(".spinner #idclass")hide(); 
        ///// OR ///// 
        $(".ss-heart-no idclass").show(); 
        $(".ss-heart-yes idclass").hide(); 
        $(".spinner idclass")hide();; 


       } else { 
        echo "error"; 
       } 
     } 
     }); 
}); 
}); 
</script> 

Answer 1

你可以試試這個

<div class="icon-groupx" id="6"> 
    <span class="ss-icon spinner" id="spinner6" src="6" style"display:none;"></span> 
    <span class="ss-icon ss-heart-no" id="heartno6" src="6" style"display:none;"></span> 
    <span class="ss-icon ss-heart-yes" id="heartyes6" src="6" ></span> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
$(".ss-heart-yes").click(function() { 
     var ID=$(this).attr("src"); 
     var dataString = 'idclass='+ idclass; 

     $("#spinner"+ID).show(); 
     $("#heartyes"+ID).hide(); 

     $.ajax({ 
     type: "POST", 
     url: "processed.php", 
     data: dataString, 
     cache: false, 
     success: function(result){ 
       var result=trim(result); 
       if(result=='OK'){ 

        $("#heartno"+ID).show(); 
        $("#heartyes"+ID).hide(); 
        $("#spinner"+ID)hide();; 


       } else { 
        echo "error"; 
       } 
     } 
     }); 
}); 
}); 
</script> 

Answer 2

HTML中的ID是唯一的。事實上，他們多個腐敗你的網頁，這就是爲什麼它不起作用。

參見this documentation.

id屬性指定用於HTML元素（值必須是在HTML文檔中是唯一的）的唯一ID。

Answer 3

id始終是唯一的。你可以隱藏和顯示使用類本身。改變代碼如下。用於選擇div類並隱藏另一個類中的span類。你可以使用$（「。icon-groupx> .ss-icon.spinner」）。show（）;例如

<div class="outer"> 
    <div class="inner"></div> 
</div> 

你應該使用這樣

$('.outer > .inner') 

如果一個類包含空格下面給出

ex:<class="text one" > then $(".text.one").show(); is the way to use 

更改您的代碼，並嘗試

<div class="icon-groupx" id="6"> 
    <span class="ss-icon spinner" id="7" style="display:none;"></span> 
    <span class="ss-icon ss-heart-no" id="8" style="display:none;"></span> 
    <span class="ss-icon ss-heart-yes" id="9"></span> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
$(".ss-heart-yes").click(function() { 
     var idclass=$(this).attr("id"); 
     var dataString = 'idclass='+ idclass; 

     $(".icon-groupx > .ss-icon.spinner").show(); 
     $(".icon-groupx > .ss-icon.ss-heart-yes").hide(); 

     $.ajax({ 
     type: "POST", 
     url: "processed.php", 
     data: dataString, 
     cache: false, 
     success: function(result){ 
       var result=trim(result); 
       if(result=='OK'){ 

        $(".icon-groupx > .ss-icon.ss-heart-no").show(); 
        $(".icon-groupx > .ss-icon.ss-heart-yes").hide(); 
        $(".icon-groupx > .ss-icon.spinner")hide(); 


       } else { 
        echo "error"; 
       } 
     } 
     }); 
}); 
}); 
</script>