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代码。

以下几行很奇怪： ids = $(this).attr('id');您没有var
如果点击的项目是您要设置为灰色的项目，则可以直接使用$(this)。
您可以.attr("data-x")

.data("x")

您可以在jquery中链接函数。

检查以下代码段：

＆＃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;

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

5 个答案: