背景：ページに2つのカレンダーを挿入していますが、どちらもバックエンド（Business Catalyst）で生成されているため、どのイベントを含めるか以外にカレンダーを制御することはできません。私が抱えている問題は、両方のカレンダーが同じDIVIDを持っていることです。
達成したいこと：ページが読み込まれた後、javascriptを使用して、（1）2番目のカレンダーのDIV IDと（2）カレンダーのスクリプト内の同じIDへの参照を変更したいと思います。
これは、2つのカレンダーを含む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の初心者なので、あなたの答えを説明してください
2番目のカレンダーに同じ文字列を持つ他の要素がないことを願っています。
私は以下を行いました。
のhtml全体を取得<div id="nav-8-1-default-hor-left--2" role="tabpanel">して変数に格納し、xstring.replaceメソッドを使用して「calendar-container」を「calendar-container2」に置き換え、新しい文字列を取得します。そして、この文字列をhtmlとして適用し直し<div id="nav-8-1-default-hor-left--2" role="tabpanel">ました（ '' divのすべての場所で 'calendar-container'を 'calendar-container2'に置き換えます）
$(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());
});<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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加