Fatal编程技术网
  • javascript/
  • Javascript 将类添加到具有来自数组的id的元素

Javascript 将类添加到具有来自数组的id的元素

javascript jquery

Javascript 将类添加到具有来自数组的id的元素,javascript,jquery,Javascript,Jquery,我有一个数组，其中包含来自cookie的值，如果其中一个值与我要添加类测试的h2的id匹配。这是我最近尝试的路线。谢谢 jQuery.each(arr, function(index, value) { $("h2.#" + value).addClass("testing"); }); 完整代码： <script type="text/javascript"> $(document).ready(function(){ var cookieName = $("bo

我有一个数组，其中包含来自cookie的值，如果其中一个值与我要添加类测试的h2的id匹配。这是我最近尝试的路线。谢谢

jQuery.each(arr, function(index, value) {
    $("h2.#" + value).addClass("testing");
});
完整代码：

<script type="text/javascript">
$(document).ready(function(){
    var cookieName = $("body").attr("id");
    storedCookieName = $.cookie(cookieName);

    if (storedCookieName != null) {

        var cookieValues = storedCookieName;
        var arr = storedCookieName.split(',');
        alert( "the cookie values for this page are :" + arr);

        jQuery.each(arr, function(index, value) {
            $("#" + value).addClass("testing");
        });


    } else {
        var cookieValues = '';
        alert("I don't have a cookie for this page");
};

  //add id's to each drop down box trigger
$('h2.contentTrigger').attr('id', function(i, value) {
    return "dropDownTrigger" + (i+1);
});

//Hide (Collapse) the toggle containers on load
$(".toggle_content_container").hide(); 

//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("h2.contentTrigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("fast");
    return false; //Prevent the browser jump to the link anchor
});


$("h2.contentTrigger").click(function(){

      //get class of clicked item to check if dropdown is active when clicked
    var triggerClass = $(this).attr("class");
      //get id of clicked dropdown
    var targetLink = $(this).attr("id");

    if ((triggerClass == 'contentTrigger noprint active') || (triggerClass == 'contentTrigger print active')) {
        cookieValues+=($(this).attr("id")+",");
        $.cookie(cookieName, cookieValues, { path: '/', expires: 10 });
        //alert("adding value" + cookieValues);    
    }else{
        cookieValues = cookieValues.replace(targetLink+",", "");
        $.cookie(cookieName, cookieValues, { path: '/', expires: 10 });    
        //alert("new value" + cookieValues);    
    };
});

});//end:$(document).ready
</script>

</head>
<body id="<CFOUTPUT>#SMPPageVariables.PageMetaKeywords#</CFOUTPUT>">
<div id="container">
<CFINCLUDE TEMPLATE="../libraryelements/AR_TwoDeepLeft_Navigation.element">
<div id="content">
<CFMODULE TEMPLATE="../../modules/mod_page_item_area_display.cfm" AreaID="108" PageID="#SMPPageVariables.PageID#">
<CFMODULE TEMPLATE="../../modules/mod_page_item_area_display.cfm" AreaID="109" PageID="#SMPPageVariables.PageID#">
<!--Sample of output    
<div class="tab">
    <h2 class="contentTrigger noprint"><a>What Is Important To Know</a></h2>
    <div class="toggle_content_container noprint">
        <div class="block">
            <h4>Info</h4>
            <p>Info:</p>
            <ul>
                <li>Words</li>
                <li>Words</li>
            </ul>
            <h4>Heading</h4>
            <p>Paragraph</p>
            <p>Paragraph</p>
        </div>
    </div>
</div>
-->    
</div>
<div class="hidden"><CFMODULE TEMPLATE="../../modules/mod_page_item_area_display.cfm" AreaID="110" PageID="#SMPPageVariables.PageID#"></div>
</div>
</body>
</html>


$（文档）.ready（函数（）{
var cookieName=$（“body”）.attr（“id”）；
storedCookieName=$.cookie（cookieName）；
if（storedCookieName！=null）{
var cookieValues=storedCookieName；
var arr=storedCookieName.split（'，'）；
警报（“此页面的cookie值为：”+arr）；
每个（arr，函数（索引，值）{
$（“#”+值）.addClass（“测试”）；
});
}否则{
var cookieValues=''；
警报（“我没有此页面的cookie”）；
};
//向每个下拉框触发器添加id
$（'h2.contentTrigger'）.attr（'id'，函数（i，值）{
返回“dropDownTrigger”+（i+1）；
});
//隐藏（折叠）加载时的切换容器
$（“.toggle_content_container”）.hide（）；
//每次单击切换“打开”和“关闭”状态，然后向上/向下滑动（取决于打开/关闭状态）
$（“h2.contentTrigger”）。单击（函数（）{
$（this）.toggleClass（“活动”）.next（）.slideToggle（“快速”）；
return false；//防止浏览器跳转到链接锚点
});
$（“h2.contentTrigger”）。单击（函数（）{
//获取已单击项的类，以检查单击时下拉列表是否处于活动状态
var triggerClass=$（this.attr（“类”）；
//获取单击下拉列表的id
var targetLink=$（this.attr（“id”）；
如果（（triggerClass=='contentTrigger noprint active'）| |（triggerClass=='contentTrigger print active'））{
cookieValues+=（$（this）.attr（“id”）+，”；
$.cookie（cookieName，cookieValues，{path:'/'，expires:10}）；
//警报（“增加值”+cookieValues）；
}否则{
cookieValues=cookieValues.replace（targetLink+“，”，”）；
$.cookie（cookieName，cookieValues，{path:'/'，expires:10}）；
//警报（“新值”+cookieValues）；
};
});
});//结束：$（文档）。准备好了吗
看起来你在尖锐的字符前有一个不应该出现的点

看起来您的锐利字符前面有一个点，不应该在那里

您有一个不正确的
，使用ID时不需要
h2
。你想要这个：

jQuery.each(arr, function(index, value) {
    $("#" + value).addClass("testing");
});
您的
不正确，在使用ids时不需要
h2
。你想要这个：

jQuery.each(arr, function(index, value) {
    $("#" + value).addClass("testing");
});
从选择器中删除
<代码>“h2#”+值而不是
“h2.#”+值

所以代码看起来像

jQuery.each(arr, function(index, value) {
    $("h2#" + value).addClass("testing");
});
从选择器中删除
<代码>“h2#”+值而不是
“h2.#”+值

所以代码看起来像

jQuery.each(arr, function(index, value) {
    $("h2#" + value).addClass("testing");
});
这看起来应该行得通。你有可以发布的html吗？还有，您的“arr”数组是什么样子的？发生了什么/没有发生什么？@Keith.Abramo添加了完整的代码来帮助您更好地理解，“arr”是逗号分隔的字符串。@GregB我无法将id与数组中的值匹配的类“testing”添加到h2中。这看起来应该可以工作。你有可以发布的html吗？还有，您的“arr”数组是什么样子的？发生了什么/没有发生什么？@Keith.Abramo添加了完整的代码以帮助给出更好的想法，“arr”是逗号分隔的字符串。@GregB我无法使用与数组中的值匹配的id将类“testing”添加到h2中。@Exelian可能最终成为解决方案的一部分，但即使进行了更改，我仍然无法根据数组中的值和h2的id将类添加到h2中，我已将整页代码添加到原始问题中。@Exelian感谢您，在我修复另一个问题后，这确实起到了作用issue@Exelian这可能最终成为解决方案的一部分，但即使进行了更改，我仍然无法根据数组中的值和h2的id将类添加到h2中，我已将整页代码添加到原始问题中。@Exelian感谢您，在我修复另一个问题后，这确实起到了作用