自定义数据属性中定义的样式文本

Question

我正在使用 jQuery 函数提取所选图像的自定义数据属性中列出的文本的两部分，"htext" 用于 header 文本，"ptext"对于段落文本。我想设置此文本的样式，以便我可以添加换行符并更改每个文本位的碎片。

有什么简单的方法可以做到这一点，还是我必须重新设计才能将其设置为常规 html 文本的样式？

JSFiddle：http://jsfiddle.net/huL5gnej/1/

jQuery:

    $(document).ready
$(function()
    {
    $('img').hover(function() {
       $('h5').text($(this).attr('htext'));
       $('p').text($(this).attr('ptext'));
    },function(){
       $('h5').text($('h5').data('original'));
       $('p').text($('p').data('original'));
    });

$(window).load(function() {
    $('.flexslider').flexslider({
    animation: "fade",
    slideshow: false
        });
    });

$( document ).ready(function() {
    $( "div.info-box, address, #fade" ).fadeIn( 2000 );
    });

$( "#slideshow" ).hover(function() {
    $( ".flex-caption" ).fadeToggle( "slow", "linear" );
    });

})(Query);

HTML:

            <div>
                <div>
                    <img src="http://parkerrichard.com/studiogreen/html/img/hover-here.jpg" width="50px" height="50px" class="img-responsive" ptext="Sustainable practices are an important consideration at Studio Green.  At this office building, permeable concrete unit pavers are used in the driveway. Storm water is collected through the joints in the pavers, where the water is directed and absorbed underground, recharging ground water, and reducing run-off. Energy-efficient LED outdoor lighting is also used.">
                </div>
                <div>
                    <img src="http://parkerrichard.com/studiogreen/html/img/hover-here.jpg" width="50px" height="50px" class="img-responsive" ptext="The use of materials with recycled content is another sustainable technique used at Studio Green. Steel railing has recycled content and is also recyclable, after the life of this building project. Concrete can also be specified to have recycled content, by replacing Portland cement with either fly ash or slag, both by-products of industrial processes.">
                </div>
                <div>
                    <img src="http://parkerrichard.com/studiogreen/html/img/hover-here.jpg" width="50px" height="50px" class="img-responsive" ptext="Studio Green regularly designs storm water treatment systems. Here a bio-swale is created adjacent to a parking lot. Storm water run-off from both the parking lot and the building roof are directed to the planters, which are planted with plants that will treat pollutants in the water. The planters serve to slow down water flow and encourage water to percolate into the soil, rather than over-tax the city's piped storm water system.">
                </div>
                <div>
                    <img src="http://parkerrichard.com/studiogreen/html/img/hover-here.jpg" width="50px" height="50px" class="img-responsive" ptext="Studio Green regularly uses California native plants in planting design. Native plants provide valuable habitat for native birds and insects. California native plants are also extremely well suited for landscape use because they are perfectly adapted for landscapes in California, and are often drought-tolerant and low-maintenance.">
                </div>
                <div>
                    <img src="http://parkerrichard.com/studiogreen/html/img/hover-here.jpg" width="50px" height="50px" class="img-responsive" ptext="Water is one of our most precious resources, and the designers at Studio Green realize the importance of designing landscapes that conserve and improve our water. Here is an example of a bio-filtration planter that is used to treat storm water run-off from a building roof.">
                </div>
                <div>
                    <img src="http://parkerrichard.com/studiogreen/html/img/hover-here.jpg" width="50px" height="50px" class="img-responsive" ptext="Studio Green understands the use of micro-climate appropriate plantings    to both beautify and rehabilitate landscapes. Here the use of low-water requiring, native plants supports habitat for wildlife and pollinators.">
                </div>
            </div>
            <div class="info-box office-box pull-right">
                <span class="glyphicon glyphicon-chevron-right gob"></span>
                <div class="change-box">
                    <p data-original="Studio Green understands the use of micro-climate appropriate plantings to both beautify and rehabilitate landscapes. Here the use of low-water requiring, native plants supports habitat for wildlife and pollinators.">Studio Green understands the use of micro-climate appropriate plantings to both beautify and rehabilitate landscapes. Here the use of low-water requiring, native plants supports habitat for wildlife and pollinators.</p>
                </div>
                    </div>

CSS:

.elements-add {
    margin-right: 15px !important;
}

.office-box {
    width: 225px !important;
}

.info-box {
    text-align: left;
    font-size: 11px;
    font-weight: 400;
}

.change-box {
    height: 220px;
}

.info-box h5 {
    padding-bottom: 13px;
    font-size: 13px;
    font-weight: 600;
}

Answer 1

您可以使用 .html() 代替 .text() 并使用 HTML 标记.

自定义数据属性中定义的样式文本

Style text defined in custom data attribute

html

css

jquery

custom-attributes

text-styling