Question

我正在尝试将十六进制颜色转换为rgb。到目前为止，我已经开始使用它了，但是现在我想将一个元素的值添加到我的html（）函数中。这就是我得到的：

    $(document).ready(function(){

      function convertHex(hex,opacity){
        hex = hex.replace('#','');
        r = parseInt(hex.substring(0,2), 16);
        g = parseInt(hex.substring(2,4), 16);
        b = parseInt(hex.substring(4,6), 16);

        result = ' - rgb('+r+', '+g+', '+b+')';
        return result;
      }
      $('h1').html(convertHex('#000000'));

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="thecolor">#ef8605</span>
    <h1></h1>

现在应将#000000替换为span类的.thecolor的值。有人可以帮我解决这个问题吗？

Answer 1

您可以创建一个变量，并使用.text()来获取值

$(document).ready(function(){

      function convertHex(hex,opacity){
        hex = hex.replace('#','');
        r = parseInt(hex.substring(0,2), 16);
        g = parseInt(hex.substring(2,4), 16);
        b = parseInt(hex.substring(4,6), 16);

        result = ' - rgb('+r+', '+g+', '+b+')';
        return result;
      }
      var hex = $('.thecolor').text();
      $('h1').html(convertHex(hex));

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="thecolor">#ef8605</span>
    <h1></h1>

Answer 2

使用$('.thecolor').html()获取具有类thecolor的元素的值。

请注意，使用$('.thecolor').html()将获得可能包含在<span></span>中的html标签。您可以改为使用$('.thecolor').text()来获取内容而没有内部html标签。

如果有很多，可以使用.each()循环播放，并使用.append()将它们添加到目的地

$(document).ready(function()
{
    function convertHex(hex,opacity)
    {
        hex = hex.replace('#','');
        r = parseInt(hex.substring(0,2), 16);
        g = parseInt(hex.substring(2,4), 16);
        b = parseInt(hex.substring(4,6), 16);

        result = ' - rgb('+r+', '+g+', '+b+')';
        return result;
    }
    $('.thecolor').each(function()
    {
        $('h1').append(convertHex($(this).html()));
        // $('h1').append(convertHex($(this).text())); <-- or this one if you may have html tags in the containers $('h1')
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="thecolor">#ef8605</span>
<span class="thecolor">#ffffff</span>
<h1></h1>

如何将元素的值转换为.html（）

2 个答案: