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标记。

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

1 个答案: