Question

所以我想起了一种制作转换方式来做网站属性，但我想知道是否有办法改进我的方法。目标是有一个html文件，我的客户端将能够使用cms工具并更新网站上的常见值，如重复标题，感谢消息，公司名称等。我想使用Javascript来完成此任务。

var spSelectResultsTxt = $("#sp .selectResultsTxt");
$(".main-content .selectResultsTxt").text(spSelectResultsTxt.text());

继承人，http://jsfiddle.net/trobbins26/VwtWD/4/

脚本将文本值从一个div（客户端将在cms中更新）传递到站点中某个页面上的类。唯一的问题是我不想为网站上可能存在的每个属性创建一个var。

我的脚本中是否有一种方法可以说[如果#sp .class与.main-content .class匹配，则将#sp .class中的文本应用为.main-content .class中的文本？基本上创建一个可以应用于我创建的每个属性的规则。

任何反馈都会有所帮助。

Answer 1

这样可以解决问题：

HTML：

<!-- Represents html file that will be updated in a cms by client -->
<!-- To be included on each page of site -->
<div id="sp" style="display:none;">
    <span data-target=".main-content .selectResultsTxt">
        Select an option to see results for a specific year.    
    </span>
    <div data-target="#otherText">Some other text.</div>
</div>


<!-- represents page to apply rule -->
<div class="main-content">
    <h4><span class="selectResultsTxt"></span> testing...</h4>
    <p><span id="otherText"></span></p>
</div>

使用Javascript：

$('#sp').children().each(function() {
    $($(this).data().target).text($(this).text());
});

此处更新了小提琴：http://jsfiddle.net/VwtWD/7/

说明：

您只需遍历div.sp的子元素，然后访问其类和文本，然后在页面上查找要更新的匹配元素。

我做了一些改进：

最好留下用于识别目标元素的类，并对存储用户输入文本的元素使用数据绑定。它可以通过jQuery .data()函数轻松访问，就像我上面的解决方案一样。

能够为每个元素指定完整的CSS路径可能也很好，因此您可以将解决方案扩展到更复杂的页面。

我个人也会使用.html()方法来设置html，而不仅仅是文字，以防客户想要使用<br>代码或<em>或<img>等等。例如：

$('#sp').children().each(function() {
    $($(this).data().target).html($(this).html());
});

其他反馈：

您是否有理由使用客户端javascript来实现此目的？您可以很容易地在服务器端执行此操作（即使在带有node.js的javascript中），这将带来许多好处，包括 - 谷歌等将不会看到SEO的问题内容 - 没有javascript的浏览器不会看到内容（诚然这是一个非常小的数字，所以可能不是一个问题，但值得指出）

无论如何，作为快速解决方案，它都有效。

Answer 2

这样的事情应该做你想要的。它将按顺序遍历所有带有类的元素。如果一个元素有多个类，它将匹配具有所有相同类的元素。它不会过滤重复项，因此如果元素多次匹配，则最后一个匹配将覆盖之前的所有匹配项。

// save main element
var main = $( '.main-content' );

// for each element in #sp with a class
$( '#sp *[class]' ).each( function() {
    // get all the classes on the element, and make a jQuery selector from them
    var selector = '.' + this.getAttribute( 'class' ).replace( ' ', '.' );

    // find any matching elements in the main element, and set the text
    main.find( selector ).text( $( this ).text() );
});

编辑：这是一个演示：http://jsfiddle.net/VwtWD/6/

使用javascript传递网站属性

2 个答案: