将span ID传递给jQuery变量：不起作用

Question

jQuery(".tags").on('click',function(){ //to show a tagged pose
    var ids = $(this).attr('id');
    console.log(ids);

    var x_cord = $(this).attr('data-x');
    var y_cord = $(this).attr('data-y');

    alert($('#'+ids).length);
    $($(ids)).css({color:'gray'});

    $("#overshow").css({
        top: y_cord,
        left: x_cord,
        width:'100px',
        height:'100px',
        position:'absolute',
        border:'3px solid red'
    });

    $('#overshow').show('fast'); //.delay(1000).hide('slow');
});

这是我的一段代码。我收到警报为'1'但css属性未应用。

Answer 1

您忘记了.css来电中的ID选择器：

$("#" + ids).css({color:'gray'});

Answer 2

由于ids是当前元素的id（由this引用），因此您可以使用dom元素引用this来访问该元素，不需要使用id选择器

$(this).css({color:'gray'});

Answer 3

使用此键获取当前元素

$("#" + ids).css({'color':'gray'});

或

 $(this).css({'color':'gray'});

Answer 4

$($(ids)).css({color:'gray'})

应该是

$("#"+ids).css({'color':'gray'})

Answer 5

  

没有HTML代码，很难帮助你。请分享您的HTML代码。

1. 以下几行很奇怪： ids = $(this).attr('id');您没有var
作为前缀
2. 如果点击的项目是您要设置为灰色的项目，则可以直接使用$(this)。
3. 您可以.attr("data-x")
替换.data("x")
4. 您可以在jquery中链接函数。

检查以下代码段：

＆＃13;
＆＃13;
$(document).ready(function() {
  $(".tags").click(function() {
    $(this).css({
    	color:'gray'
    });
    $("#overshow").css({
      top: $(this).data('y'),
      left: $(this).data('x'),
      width:'100px',
      height:'100px',
      position:'absolute',
      border:'3px solid red'
    }).show('fast');
  });
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="tags" data-x="2" data-y="2">tag 1, x2, y2</button>
<button class="tags" data-x="4" data-y="4">tag 2, x4, y4</button>
<button class="tags" data-x="6" data-y="6">tag 3, x6, y6</button>
<button class="tags" data-x="8" data-y="8">tag 4, x8, y8</button>
<div id="overshow-wrapper" style="position: relative">
  <div id="overshow">
    OVERSHOW
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;