Question

<div>
    <a class="img1">click1</a><br>
    <a class="img2">click2</a><br>
</div>
<div>
    <img id="img1" src="images/01.png">
    <img id="img2" src="images/02.png">
</div>

这是我的jquery代码

$(".yo a").click(function(){
    var class1 = $(this).attr("class");
    $(".yo").find("img").attr("id",class1).css("padding","50px");
})

我希望获得＆＃39; a＆＃39;标记并查找具有相同名称的图像ID并更改该图像的填充，提前感谢（抱歉我的英文不好：p）

Answer 1

你没有做到的唯一部分是通过img找到id元素（并且有一种更简单的方法来获取链接的类）。要使用jQuery按ID查找元素，请使用#id选择器（#后跟ID）：

$(".yo a").click(function(){
    $("#" + this.className).css("padding","50px");
    //^^^^^^^^^^^^^^^^^^^^--- find the element whose id matches the class
});

示例（在下面，我添加了return false来取消点击，因此我们实际上并未关注该链接）：

$(".yo a").click(function(){
    $("#" + this.className).css("padding","50px");
    //^^^^^^^^^^^^^^^^^^^^--- find the element whose id matches the class
    return false;
});

img {
  border: 1px solid black;
}

<div class="yo">
  <a href="#" class="img1">one</a>
</div>
<div class="yo">
  <a href="#" class="img2">two</a>
</div>
<div class="yo">
  <a href="#" class="img3">three</a>
</div>
<div class="yo">
  <a href="#" class="img4">four</a>
</div>

<div>
  img 'img1':
  <img id="img1">
</div>
<div>
  img 'img2':
  <img id="img2">
</div>
<div>
  img 'img3':
  <img id="img3">
</div>
<div>
  img 'img4':
  <img id="img4">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

旁注：我建议使用类来通过CSS控制填充，而不是直接在元素上设置填充。

Answer 2

//$(".yo").find("img").attr("id",class1).css("padding","50px");
$(".yo").find("img#"+class1).css("padding","50px");

但是如果你的元素有多个类（如class="img-id other-class one-more-class"） - 你应该通过解析类属性来决定哪一个可以是一个image-id。

也许检查所有这些（不是最佳但最容易实现：

var class1 = $(this).attr("class").split(/\s+/).map(function(a){return '#'+a;}).join(',');
$(".yo").find('img').find(class1).css("padding","50px");

查找图像ID并替换为单击的按钮类

2 个答案: