Question

背景：我在页面上插入了两个日历，这两个日历都是在后端生成的（Business Catalyst）所以除了应该包含的事件之外，我无法控制日历。我遇到的问题是两个日历都有相同的DIV ID。

我想要实现的目标：页面加载后，我想使用javascript更改（1）第二个日历的DIV ID和（2）对日历脚本中相同ID的引用。

这是包含两个日历的html（已删除批量）

<div id="nav-8-1-default-hor-left--1" role="tabpanel">
    <h2>Social Calendar</h2>
    <!-- backend inserted calendar starts here -->
    <div id="calendar-container">
        <!-- Generated Calendar here-->
    </div>
    <script type="text/javascript">
        var cal = document.getElementById('calendar-container');
        // rest of calendar script here
    </script>
    <!-- backend inserted calendar ends here -->
</div>

<div id="nav-8-1-default-hor-left--2" role="tabpanel">
    <h2>Workshop Calendar</h2>
    <!-- backend inserted calendar starts here -->
    <div id="calendar-container">
        <!-- Generated Calendar here-->
    </div>
    <script type="text/javascript">
        var cal = document.getElementById('calendar-container');
        // rest of calendar script here
    </script>
    <!-- backend inserted calendar ends here -->
</div>

这是我试过的剧本，但没有效果：

<script>
$(document).on('ready', function() {
    //replace ID of second calendar and ref to its id in script
    $('#nav-8-1-default-hor-left--2').find('#calendar-container').attr("id", "#calendar-container2");
    $('#nav-8-1-default-hor-left--2').find('calendar-container').replace('calendar-container', 'calendar-container2');
});

我是javascript / jquery的新手，所以请解释一下你的答案

Answer 1

希望第二个日历中没有其他元素具有相同的字符串。

我做了以下。

我使用<div id="nav-8-1-default-hor-left--2" role="tabpanel">的完整html并将其存储在变量x中，然后我替换了＆＃39; calendar-container＆＃39;与＆＃39; calendar-container2＆＃39;使用string.replace方法并获取新字符串。然后我将这个字符串应用为<div id="nav-8-1-default-hor-left--2" role="tabpanel">的html。（我将＆＃39; calendar-container＆＃39;以及＃39; calendar-container2＆＃39;替换为＃39;＆＃ 39; div）

＆＃13;

$(document).on('ready', function() {
    var x=$('#nav-8-1-default-hor-left--2').html();
    
    x=x.replace(/calendar-container/g,'calendar-container2');
    $('#nav-8-1-default-hor-left--2').html(x);
    console.log($('#nav-8-1-default-hor-left--2').html());
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav-8-1-default-hor-left--1" role="tabpanel">
    <h2>Social Calendar</h2>
    <!-- backend inserted calendar starts here -->
    <div id="calendar-container">
        <!-- Generated Calendar here-->
    </div>
    <script type="text/javascript">
        var cal = document.getElementById('calendar-container');
        // rest of calendar script here
    </script>
    <!-- backend inserted calendar ends here -->
</div>

<div id="nav-8-1-default-hor-left--2" role="tabpanel">
    <h2>Workshop Calendar</h2>
    <!-- backend inserted calendar starts here -->
    <div id="calendar-container">
        <!-- Generated Calendar here-->
    </div>
    <script type="text/javascript">
        var cal = document.getElementById('calendar-container');
        // rest of calendar script here
    </script>
    <!-- backend inserted calendar ends here -->
</div>

＆＃13;

用jquery替换另一个div中的div id和text

1 个答案: