javascript - JavaScript:用 JS/HTML 选项卡替换 HTML 元素
问题描述
我正在尝试设置一个测试,但无法用另一个元素替换一个元素。我通过一个企业 CRO 测试平台来做到这一点。
正在构建测试的页面:https ://medcline.com/products/shoulder-relief-pillow
在图像轮播的右侧,您会看到一张桌子。该表存在于具有“描述”类的 div 中。
我正在尝试使用“描述”类用选项卡式内容替换该表,但我无法让它工作。我的代码:
<script type="text/JavaScript">
var myAnchor = document.getElementsByClassName("description");
var mySpan = document.createElement("div");
mySpan.innerHTML = "<div class="tab">
<button class="tablinks" onclick="openPerk(event, 'Relief')" id="defaultOpen">Relief</button>
<button class="tablinks" onclick="openPerk(event, 'Features')">Features</button>
</div>
<div id="Relief" class="tabcontent">
<p><strong>Wake up refreshed!</strong> This patented, three-component Sleep System naturally relieves nighttime shoulder pain so you can sleep better at night and feel better during the day.</p>
<p>Do you experience nighttime acid reflux? For patients with both shoulder pain and nighttime acid reflux, we recommend the <strong><a href="https://medcline.com/products/medcline-reflux-relief-system">MedCline Reflux Relief System</a></strong>.</p>
</div>
<div id="Features" class="tabcontent">
<ul><li>Patented arm pocket for pain free sleep</li>
<li>FSA/HSA approved</li>
<li>95% of usuers report better sleep</li>
<li>Left- or right-side use</li></ul>
</div>";
myAnchor.parentNode.replaceChild(mySpan, myAnchor);
function openPerk(evt, perkName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(perkName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
</script>
感谢您的任何帮助。
解决方案
1. 转义换行符/模板文字
最明显的第一个更改是修改该mySpan.innerHTML
部分:HTML 字符串不能按原样工作,因为单引号和双引号不支持未转义的换行符。您可以转义换行符或使用模板文字来解决此问题。
A. 转义换行符
将所有未转义的换行符更改为\n
将解决该问题。它可能不那么可读,但是这种方法没有错。
mySpan.innerHTML = "<div class=\"tab\">\n <button class=\"tablinks\" onclick=\"openPerk(event, 'Relief')\" id=\"defaultOpen\">Relief</button>\n<!-- ... -->\n</div>";
注意:字符串中还需要转义双引号,以免导致语法错误。
B. 模板文字
使用模板文字,反引号之间的任何换行符的解释方式与转义换行符相同。
mySpan.innerHTML = `<div class="tab">
<button class="tablinks" onclick="openPerk(event, 'Relief')" id="defaultOpen">Relief</button>
<!-- ... -->
</div>`;
2. HTMLCollection,而不是 Element
另一个小错误是myAnchor
变量是一个HTMLCollection
(即使只有一个结果也getElementsByClassName
返回一个),所以它不会有属性。HTMLCollection
parentNode
更改赋值表达式以引用 中的第一个元素HTMLCollection
可解决此问题:
var myAnchor = document.getElementsByClassName("description")[0];
完整的解决方案
下面的代码片段从引用的网页中借用了必要的元素,以显示上面列出的更改的工作示例。
const myAnchor = document.getElementsByClassName("description")[0];
const mySpan = document.createElement("div");
mySpan.innerHTML = `<div class="tab">
<button class="tablinks" onclick="openPerk(event, 'Relief')" id="defaultOpen">Relief</button>
<button class="tablinks" onclick="openPerk(event, 'Features')">Features</button>
</div>
<div id="Relief" class="tabcontent">
<p><strong>Wake up refreshed!</strong> This patented, three-component Sleep System naturally relieves
nighttime shoulder pain so you can sleep better at night and feel better during the day.</p>
<p>Do you experience nighttime acid reflux? For patients with both shoulder pain and nighttime acid reflux, we recommend the
<strong><a href="https://medcline.com/products/medcline-reflux-relief-system">MedCline Reflux Relief System</a></strong>.</p>
</div>
<div id="Features" class="tabcontent">
<ul>
<li>Patented arm pocket for pain free sleep</li>
<li>FSA/HSA approved</li>
<li>95% of usuers report better sleep</li>
<li>Left- or right-side use</li>
</ul>
</div>`;
myAnchor.parentNode.replaceChild(mySpan, myAnchor);
function openPerk(evt, perkName) {
let i;
const tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
const tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(perkName).style.display = "block";
evt.currentTarget.className += " active";
}
window.openPerk = openPerk;
document.getElementById("defaultOpen").click();
<div class="seven columns medium-down--one-whole omega">
<div class="sale_banner_product">Sale</div>
<h1 class="product_name">MedCline Shoulder Relief System</h1>
<div data-oke-reviews-product-listing-rating="">
<div data-oke-reviews-version="2.13.0" class="okeReviews okeReviews--theme">
<div class="okeReviews-reviewsSummary js-okeReviews-reviewsSummary is-okeReviews-clickable" data-oke-ga-click-action="Star Rating Summary Click" data-oke-ga-click-label="MedCline Shoulder Relief System" tabindex="0" role="button">
<div class="okeReviews-reviewsSummary-starRating">
<span class="okeReviews-starRating okeReviews-starRating--small">
<span class="okeReviews-a11yText">Rated 4.2 out of 5</span>
<span class="okeReviews-starRating-indicator" role="presentation">
<span class="okeReviews-starRating-indicator-layer"></span>
<span class="okeReviews-starRating-indicator-layer okeReviews-starRating-indicator-layer--foreground" style="width: 85%"></span>
</span>
</span>
</div>
<div class="okeReviews-reviewsSummary-ratingCount">
<span aria-hidden="true">364 Reviews</span>
<span class="okeReviews-a11yText">Based on 364 reviews</span>
</div>
<span class="okeReviews-a11yText">Click to go to reviews</span>
</div>
</div>
</div>
<div class="feature_divider"></div>
<div class="modal_price">
<div class="price__container price__container--display-price-false "> <span content="199.99" class="sale"> <span class="current_price"> <span class="money">$199.99</span></span>
</span> <span class="was_price"> $249.99</span> <span class="sale savings"> You Save 20% (<span class="money">$50.00</span>)</span>
</div>
<div class="sold-out__container"> <span class="sold_out"></span></div>
</div>
<div class="description">
<div class="desktop-only">
<b></b>
<table class="compare_table" id="lp_blue" style="width: 100%;">
<tbody>
<tr>
<th></th>
<th>MedCline</th>
<th>The Other Guys</th>
</tr>
<tr>
<td>Patented Arm Pocket for Pain Free Sleep</td>
<td>✓</td>
<td>✕</td>
</tr>
<tr>
<td>FSA/HSA Approved</td>
<td>✓</td>
<td>✕</td>
</tr>
<tr>
<td>95% of Users Report Better Sleep</td>
<td>✓</td>
<td>✕</td>
</tr>
<tr>
<td>Left or Right-Side Use</td>
<td>✓</td>
<td>✕</td>
</tr>
</tbody>
</table>
</div>
<dl class="faqAccordion right-for-you mobile-only">
<dt><button type="button" aria-expanded="false">How MedCline compares to the competition</button></dt>
<dd id="panel-05" aria-hidden="true">
<table style="width: 100%;" id="lp_blue" class="compare_table">
<tbody>
<tr>
<th></th>
<th>MedCline</th>
<th>The Other Guys</th>
</tr>
<tr>
<td>Patented Arm Pocket for Pain Free Sleep</td>
<td>✓</td>
<td>✕</td>
</tr>
<tr>
<td>FSA/HSA Approved</td>
<td>✓</td>
<td>✕</td>
</tr>
<tr>
<td>95% of Users Report Better Sleep</td>
<td>✓</td>
<td>✕</td>
</tr>
<tr>
<td>Left or Right-Side Use</td>
<td>✓</td>
<td>✕</td>
</tr>
</tbody>
</table>
</dd>
</dl>
</div>
<div class="clearfix product_form init smart-payment-button--false product_form--dropdown" id="product-form-4791002857607" data-product-form="" data-options-size="1" data-money-format="${{amount}}" data-shop-currency="USD" data-select-id="product-select-4791002857607"
data-enable-state="true" data-product="" data-product-id="4791002857607">
<form method="post" action="/cart/add" id="product_form_4791002857607" accept-charset="UTF-8" class="shopify-product-form" enctype="multipart/form-data"><input type="hidden" name="form_type" value="product"><input type="hidden" name="utf8" value="✓"> <input type="hidden" name="id" value="33912967626887">
<div class="purchase-details">
<div class="purchase-details__quantity product-quantity-box"> <label for="quantity">Qty</label> <span class="ss-icon product-minus js-change-quantity" data-func="minus"><span class="icon-minus"></span></span> <input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="1"> <span class="ss-icon product-plus js-change-quantity" data-func="plus"><span class="icon-plus"></span></span>
</div>
<div class="purchase-details__buttons purchase-details__spb--false ">
<a class="bundleupgrade__trigger quick-pay-off" js-trigger-bundle="">ADD TO CART</a> <button type="button" name="add" class=" ajax-submit action_button add_to_cart " data-label="Add to Cart"> <span class="text"> Add to Cart</span> <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" class="checkmark">
<path fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"></path>
</svg></button>
</div>
<shopify-payment-terms variant-id="33912967626887" shopify-meta="{"variants":[{"id":33912967626887,"price":"$49.99","eligible":true}],"min_price":"$50","max_price":"$3000"}"></shopify-payment-terms>
<div class="cf-order-by-outer" style="display:none;"> Order NOW and get it by: <span class="cf-order-by-date"></span></div>
</div>
</form>
</div>
</div>
推荐阅读
- terraform - Azure 负载均衡器中的多个前端配置,带有使用 Terraform 的单个 VM
- javascript - 如何制作一个带有位置的块:固定在通过某个边界时改变颜色?
- android-jetpack-compose - FocusRequestor 正在吃后面的动作,需要额外的后面动作
- python - 如何并行运行python HTTP流服务器(PiCamera)+运动检测?
- oauth-2.0 - Fastapi:如何更新/更改 OAuth2 Bearer 令牌
- javascript - 使用 javascript 和 Cypress 在浏览器中设置代理
- python - 替代 TK 来获取文件打开对话框 (Spyder)
- javascript - 重新编码未定义的 javascript 函数
- javascript - Strophe Worker Websocket
- javascript - 离线保存数据