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

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");
})

我想获取“a”标签的类名并找到具有相同名称的图像 id 并更改该图像的填充，在此先感谢（抱歉我的英语不好：p）

Answer 1

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

但是如果你的元素有多个类（比如class="img-id other-class one-more-class"）——你应该另外解析类属性并决定哪一个可以是图像ID。

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

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

Answer 2

您唯一没有做对的部分是通过id 找到img 元素（还有一种更简单的方法来获取链接的类）。要使用 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 控制填充。