序文
DOMの基本的な操作に慣れ、DOMに強い関心を持って、自分で掘り下げて、ショッピングカートと同様の追加機能を実現できる小さなケースを作成しました。
結果を示す
まず効果を見てみましょう。
赤い部分が「商品エリア」、下の青い部分が「ショッピングカート」です。
追加ボタンをクリックすると、対応する製品が青い領域に表示されます。
ソースコード
html部分
<body>
<div class="commotity">
<ul>
<li>
<a id="1">商品1</a>
<button class="btn1">添加</button>
</li>
<li>
<span id="2">商品2</span>
<button class="btn1">添加</button>
</li>
<li>
<span id="3">商品3</span>
<button class="btn1">添加</button>
</li>
</ul>
</div>
<div class="cart">
<ul></ul>
</div>
</body>
cssパート
* {
margin: 0;
padding: 0;
}
.commotity {
background-color: brown;
width: 100%;
height: 400px;
}
ul,
li {
text-decoration: none;
text-align: center;
}
.cart {
background-color: cyan;
height: calc(100vh - 400px);
width: 100%;
}
jsコード部分
window.onload = function() {
var idarr = [];
var btn1 = document.getElementsByClassName("btn1");
for (var i = 0; i < btn1.length; i++) {
btn1[i].onclick = function (e) {
var e = e || window.event; //兼容ie
// console.log(e.target)
var dom = e.target; //获取被点击的元素
//去找到要操作的结点
var predom2 = dom.previousElementSibling;
var predom2_n = predom2.nodeName.toLowerCase();
var a = document.createElement(predom2_n);
a.innerHTML = predom2.innerHTML;
var cart_ul = document.querySelector(".cart>ul");
var oLI = document.createElement("li");
oLI.appendChild(a);
cart_ul.appendChild(oLI);
}
アイデア
このような効果を実現するために、コードのロジックは複雑ではありません。
-
まず、最初にすべてのボタン要素を取得します。
var btn1 = document.getElementsByClassName("btn1"); -
次に、forループを使用して、ボタンにクリックイベントを追加します。
-
クリックした要素を最初に取得します
var dom = e.target; -
次に、ボタンの前の兄弟ノード、つまり製品情報が配置されているラベルを取得します。
var predom2 = dom.previousElementSibling; -
製品を入手したら、ラベルタイプも入手する必要があります。これにより、以下に追加するときに構造の一貫性を保つことができます。
var predom2_n = predom2.nodeName.toLowerCase(); -
製品情報のラベル名に対応するラベルを生成します。たとえば
<a>商品1</a>、次のコードを実行します。aはタグのペアです。
var a = document.createElement(predom2_n); -
次に、innerHTMLを使用して製品のコンテンツを取得し、作成したばかりのタグに渡します。
a.innerHTML = predom2.innerHTML; -
<div class='cart'>下のulラベルを選択します。
var cart_ul = document.querySelector(".cart>ul"); -
liタグを作成する
var oLI = document.createElement("li"); -
ノードをoLIに追加します。
oLI.appendChild(a); -
次に、oLIノードをcart_ulに追加します。
cart_ul.appendChild(oLI);
と述べられている
。この場合は、初心者のための唯一の運動です、ショッピングカートには実装されていない多くの操作が残っています。例えば、繰り返し製品を追加し、あなたがカウントするカウンタを追加する必要があり、削除ショッピングカートの製品を、など