使用 javascript 传递站点属性

Question

所以我有点想出一种转变方式来做网站属性，但我想知道是否有办法改进我的方法。目标是拥有 1 个 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/