使用javascript传递网站属性 [英] Passing site properties with javascript

问题描述

如此，我想出了一种做站点属性的权宜之计，但是我想知道是否有一种方法可以改进我的方法.目标是拥有1个html文件，我的客户将能够使用cms工具并更新站点上的常用值，例如重复的标头，感谢消息，公司名称等.我想使用Javascript来完成此操作.

So ive sort of conjured up a make shift way to do site properties, but am wondering if there is a way to improve my method. The objective is to have 1 html file where my client will be able to use a cms tool and update common values on the site such as repeated headers, thank you messages, company name, etc. I would like to use Javascript to accomplish this.

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

这里有一个活跃的小提琴， http://jsfiddle.net/trobbins26/VwtWD/4/

Heres an active fiddle, http://jsfiddle.net/trobbins26/VwtWD/4/

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

The script passes a text value from one div (which the client will update in a cms) to a class on some page in the site. The only problem is I don't want to create a var for every property that may exist on the site.

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

Is there a way in my script to say [if the #sp .class matches the .main-content .class, apply the text within the #sp .class as the text within the .main-content .class? Essentially creating one rule that can apply to every property i create.

任何反馈都是有帮助的.

Any feedback would be helpful.

推荐答案

这可以解决问题:

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:

Javascript:

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

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

Updated Fiddle here: http://jsfiddle.net/VwtWD/7/ ​

说明:

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

You just loop through the child elements of div.sp, then access its class and text and go looking for a matching element on the page to update.

我做了一些改进:

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

It's best to leave classes for identifying the target elements, and use the data- binding on the elements that store the user-entered text. It's easily accessible through the jQuery .data() function as in my solution above.

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

It'd probably also be nice to be able to specify the full CSS path for each element, so you can scale the solution to more complex pages.

我个人还可以使用.html()方法设置html，而不仅仅是文本，以防客户端要使用<br>标签或<em>或<img>等.例如:

Personally I'd also use the .html() method to set html, not just text, in case the client wants to use a <br> tag or <em> or <img>, etc. Example:

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

其他反馈:

您使用客户端JavaScript来实现此目的是有原因的吗?您可以在服务器端轻松完成此操作(甚至在带有node.js的javascript中)，这将带来很多好处，包括 -Google等不会看到该内容，这是SEO的问题 -没有javascript的浏览器将看不到内容(诚然，这是一个很小的数字，因此可能不必担心，但值得指出)

Is there a reason you're using client-side javascript to achieve this? You could do it on the server-side pretty easily (even in javascript with node.js) which would have a number of benefits, including - Google etc. won't see the content which is an issue for SEO - Browsers without javascript won't see the content (admittedly this is a very small number and so may not be a concern, but worth pointing out)

无论如何，它都是一种快速的解决方案.

Regardless, as a quick-hack-solution, it works.

这篇关于使用javascript传递网站属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！