Question

我正在做一些CSS，但是我对JavaScript不太满意。但是我不允许编辑任何插件文件，所以我认为我可以使用一些JavaScript来解决缺少唯一类的问题。

我只想从图像中获取alt="" HTML属性，并将其作为class="" HTML属性应用于其父<a>元素。

所以代替：

<div class="wrapper-class">    
    <a class="img-parent">
        <img alt="image 1" src="">
    </a>    
    <a class="img-parent">
        <img alt="image 2" src="">
    </a>    
    <a class="img-parent">
        <img alt="image 3" src="">
    </a>    
</div>

我需要：

<div class="wrapper-class">    
    <a class="img-parent image-1">
        <img alt="image 1" src="">
    </a>    
    <a class="img-parent image-2">
        <img alt="image 2" src="">
    </a>    
    <a class="img-parent image-3">
        <img alt="image 3" src="">
    </a>    
</div>

这是我想做的伪代码：

(1) $ Function = ('**.wrapper-class**')
(2) IF (**this**) contains **img**
(3) GET image **alt value**
(4) if (this) contains ('**a**')
(6) Replace **alt** value empty space with - and apply **alt** value to **a** element as class
(7) else = do nothing

我该怎么做？

Answer 1

假设所有each都将有问题的.img-parent作为唯一的孩子，就好像一个简单的img就可以做到：

$('.img-parent').each(function() {
  this.classList.add(this.children[0].alt.replace(/ /g, '-'));
});
console.log(document.body.innerHTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-class">

  <a class="img-parent">
    <img alt="image 1" src="">
  </a>

  <a class="img-parent">
    <img alt="image 2" src="">
  </a>

  <a class="img-parent">
    <img alt="image 3" src="">
  </a>

</div>

（也称为“ psuedocode”）

Answer 2

这应该找到图像并将alt属性添加到<a>父母的班级

$('.wrapper-class img').each(function(){
  $(this).parent('a').addClass($(this).prop('alt').replace(/\s/g,'-'));
  //$(this).parent('a').addClass($(this).prop('alt'));
});
console.log($('.wrapper-class').html())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-class">

  <a class="img-parent">
    <img alt="im a flower" src="">
  </a>

  <a class="img-parent">
    <img alt="image-2" src="">
  </a>

  <a class="img-parent">
    <img alt="image-3" src="">
  </a>

</div>

Answer 3

首先，让我说使用alt属性值并将其用作类名不是一个好主意。假设从文件名生成了alt属性，则文件名允许将非法字符用作CSS类名。

即： picture + label.jpg 和 picture.with.label.jpg 是完全有效的文件名。假设图库至少剥离了文件扩展名，您将获得 picture + label 和 picture.with.label 作为alt属性，这两个属性均不能用作类名，因为点和加号在CSS选择器中具有特殊含义。

为了安全起见，您可能需要先将该值用作类名进行转义。

我建议：

 @Override
    public Connection find(Connection con) {
        Field delegate = ((HikariProxyConnection) con).getClass().getSuperclass().getDeclaredField("delegate");
        delegate.setAccessible(true);
        return (Connection) delegate.get(con);
    }

(function addClasses() {
    $('.wrapper-class img').each(function (i, image) {
        var imageElem = $(image);
        var altValue = imageElem.attr("alt"); // Use .attr, not .prop as alt is always a string.
        if (!altValue)
            return; // either skip to next if image has no alt value or use some default value
        
        // Replace invalid characters here, i.e. using Regular expression
        altValue = altValue.replace(/[^a-z0-9\-_]/gi, "_");

        // .closest() allows the image to be wrapped in another element/s beside the link
        imageElem.closest("a.img-parent").addClass(altValue);
    });
})();

获取图片替代，添加为父类

3 个答案: