如何获得一个元素到html的值（ ）

Question

我想转换一个十六进制颜色TOT 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>