1

所以我有点想出一种转变方式来做网站属性，但我想知道是否有办法改进我的方法。目标是拥有 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 中的文本？本质上是创建一个可以应用于我创建的每个属性的规则。

任何反馈都会有所帮助。

4

2 回答 2

2

这可以解决问题：

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/ ​</p>

解释：

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

我做了一些改进：

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

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

就我个人而言，我也会使用该.html()方法来设置 html，而不仅仅是文本，以防客户端想要使用<br>标签 or <em>or<img>等​​。示例：

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

其他反馈：

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

无论如何，作为一种快速破解解决方案，它是有效的。

于 2012-10-25T04:47:07.837 回答
0

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

// 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/

于 2012-10-25T04:40:50.677 回答