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

Question

我使用一个jQuery函数来提取所选图像的自定义数据属性中列出的两部分文本，标题文本为"htext“，段落文本为"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。