如何在类元素中调用id元素？

How do I make this $(".spinner #6").hide(); ? Is there a way to make it that way ? because if I use like this $(".spinner").attr("id", yes).show(); or $(".spinner").attr("id", 6).show();.. then all id="" , will appear. and if i use this code $(".spinner").find("id", yes).css("display", "block"); nothing happened. Is there a way to cope with this kind of thing ?

我如何制作这个$(“。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>

3 个解决方案

#1

You can try this

你可以试试这个

<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>

#2

IDs in HTML are unique. The fact that you multiple of them corrupts your page, which is why it doesn't work.

HTML中的ID是唯一的。你多次破坏你的页面的事实,这就是为什么它不起作用。

See this documentation.

请参阅此文档。

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

id属性指定HTML元素的唯一ID(该值在HTML文档中必须是唯一的)。

#3

id is always unique. you can hide and show using class itself.change the code as given below. for selecting a div class and hiding the span class which is inside another class . you can use $(".icon-groupx > .ss-icon.spinner").show(); example

id始终是唯一的。你可以使用类本身隐藏和显示。更改下面给出的代码。用于选择div类并隐藏另一个类中的span类。你可以使用$(“。icon-groupx> .ss-icon.spinner”)。show();例

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

you should use like this

你应该这样使用

$('.outer > .inner')

And if a class contain space

如果一个类包含空格

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

your code change it as given below and try it

你的代码如下所示改变它并尝试它

<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>