How do I increment data attributes(int) using jquery?

How do I increment data attributes(int) using jquery? - javascript

I want to add somethin y input in my ol, i do it,
when i write something in input filed and click add
i create li, then i want to add to li data attribute
which will increment, when will create new li in the picture there is a code[1]: https://i.stack.imgur.com/oAr6V.png
this is what i tried so far (data-id is not adding to newlt created li's):-
$(".add").click(function() {
var $val = $(".taskk");
var value = $val.val();
if(value === "") {
$(".error").text("Fill in the task");
} else {
$(".error").text("");
var newLi = $('<li>' + value + '</li>');
$('.toDo ol').append((newLi));
/*newLi.each(function() {
$(this).attr("data-id", i++);
console.log(i++);
$('.toDo ol').append((newLi));
});
$('.toDo ol').append((newLi)); */
}
})
body {
background-color: #34545E;
}
.wrapper {
max-width: 1200px;
width: 100%;
margin: auto;
}
.flexbox {
display: flex;
justify-content: space-between;
margin-top: 100px;
}
.box {
min-width: 280px;
min-height: 250px;
border: 2px solid transparent;
background-color: grey;
}
h1 {
text-align: center;
background-color: aliceblue;
padding: 5px;
}
form {
display: flex;
flex-direction: column;
margin-top: 40px;
}
input[type="text"] {
height: 80px;
}
input[type="button"], button {
padding: 10px;
width: 100px;
margin-top: 20px;
background-color: #000;
border: 1px solid transparent;
color: #fff;
font-weight: bold;
cursor: pointer;
}
ol {
list-style-position: inside;
}
ol li {
padding: 7px;
margin-top: 2px;
word-wrap: break-word;
}
.toDo ol li {
background-color: #ffffff;
}
.compl ol li {
background-color: #F35369;
}
.draft ol li {
background-color: #ffffff;
color: grey;
opacity: 0.8;
text-decoration: line-through;
}
.delete {
background-color: #000000;
}
.error {
padding-top: 20px;
color: red;
}
.add {
padding: 20px;
background-color: black;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="flexbox">
<div class="box1">
<h1>To do list</h1>
<div class="box toDo">
<ol>
</ol>
</div>
</div>
<div class="box2">
<h1>Drafts</h1>
<div class="box draft">
<ol>
</ol>
</div>
<button type="submit">Delete</button>
</div>
<div class="box3">
<h1>Add a task</h1>
<div class="box">
<p class="error"></p>
<form action="" method="post">
<input type="text" name="name" placeholder="Description" class="taskk">
<input type="button" name="add" value="Add task" class="add">
</form>
</div>
</div>
</div>
</div>

You can do it like below:-
check pre-existing li length and add 1 to it and add it as data-id of newly created li
var newLi = $('<li data-id="'+($('li').length+1)+'">' + value + '</li>');// check pre-existing `li` length and add 1 to it and add it as data-id of newly created `li`
Working snippet:-
$(".add").click(function() {
var $val = $(".taskk");
var value = $val.val();
if(value === "") {
$(".error").text("Fill in the task");
} else {
$(".error").text("");
var newLi = $('<li data-id="'+($('li').length+1)+'">' + value + '</li>');
$('.toDo ol').append((newLi));
}
});
body {
background-color: #34545E;
}
.wrapper {
max-width: 1200px;
width: 100%;
margin: auto;
}
.flexbox {
display: flex;
justify-content: space-between;
margin-top: 100px;
}
.box {
min-width: 280px;
min-height: 250px;
border: 2px solid transparent;
background-color: grey;
}
h1 {
text-align: center;
background-color: aliceblue;
padding: 5px;
}
form {
display: flex;
flex-direction: column;
margin-top: 40px;
}
input[type="text"] {
height: 80px;
}
input[type="button"], button {
padding: 10px;
width: 100px;
margin-top: 20px;
background-color: #000;
border: 1px solid transparent;
color: #fff;
font-weight: bold;
cursor: pointer;
}
ol {
list-style-position: inside;
}
ol li {
padding: 7px;
margin-top: 2px;
word-wrap: break-word;
}
.toDo ol li {
background-color: #ffffff;
}
.compl ol li {
background-color: #F35369;
}
.draft ol li {
background-color: #ffffff;
color: grey;
opacity: 0.8;
text-decoration: line-through;
}
.delete {
background-color: #000000;
}
.error {
padding-top: 20px;
color: red;
}
.add {
padding: 20px;
background-color: black;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="flexbox">
<div class="box1">
<h1>To do list</h1>
<div class="box toDo">
<ol>
</ol>
</div>
</div>
<div class="box2">
<h1>Drafts</h1>
<div class="box draft">
<ol>
</ol>
</div>
<button type="submit">Delete</button>
</div>
<div class="box3">
<h1>Add a task</h1>
<div class="box">
<p class="error"></p>
<form action="" method="post">
<input type="text" name="name" placeholder="Description" class="taskk">
<input type="button" name="add" value="Add task" class="add">
</form>
</div>
</div>
</div>
</div>

Related

How to use jquery or javaScript to select an item and click OK to put the item in the input box?

Hello everyone~ I am a beginner in programming, and I am completing a task today! But I have some difficulties~
I hope everyone can help me. My English is not very good, but I try to describe my problem completely!
Expected effect
Click the input box to pop up the window
Click the item, the selected item will have a yellow background, and then press confirm to put the selected item in the input input box, and then the pop-up window will disappear.
If you click cancel, the original options will be kept, and the pop-up window will disappear.
However, I just learned jquery recently. I don't know how to implement click confirm and put the item in the input, and how to click cancel to keep the original item and pop out of the window.
Hope you can get help here, thank you again for watching.
$(function(){
$('.input_box').on('click',function(){
$('.sport').css('display','block');
})
$('.sport').click(function(e){
if(e.target.classList.contains('sport')){
$(this).css('display','none');
}
})
$('.sport').click(function(e){
if(e.target.classList.contains('sport')){
$(this).css('display','none');
}
})
$('.item').on('click',function(){
$(this).toggleClass('active');
})
// How to rewrite this program
$('.confirm').on('click',function(e){
// only a little change here
const val = e.target.getAttribute("value");
$('.input_box').val(val);
$('.sport_content').trigger("click");
})
});
.input_box {
width: 500px;
height: 60px;
font-size: 30px;
}
.sport {
background-color: rgba(0, 0, 0, 0.3);
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
display: none;
}
.sport_content {
width: 500px;
padding: 20px;
margin: 0 auto;
background-color: red;
}
.sport_content .title {
text-align: center;
padding: 10px;
font-size: 30px;
font-weight: 800;
}
.sport_content .category {
display: flex;
}
.sport_content .category .item {
width: 100px;
border: 1px solid #fff;
text-align: center;
border-radius: 10px;
padding: 10px;
margin: 10px;
}
.sport_content .category .active {
background-color: yellow;
}
.sport_content .footer {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.sport_content .footer .cancel {
padding: 20px;
background-color: #fff;
}
.sport_content .footer .confirm {
padding: 20px;
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="">Choose your favorite sport</label><br>
<input type="text" placeholder="Put in your favorite sports" class="input_box">
<div class="sport">
<div class="sport_content">
<h2 class="title">Aerobic exercise</h2>
<ul class="category">
<li class="item" value="RUN">RUN</li>
<li class="item" value="SWIM">Swim</li>
<li class="item" value="bicycle">bicycle</li>
</ul>
<h2 class="title">Strength training</h2>
<ul class="category">
<li class="item" value="weightlifting">weightlifting</li>
<li class="item" value="Stand up">Stand up</li>
<li class="item" value="Barbell">Barbell</li>
</ul>
<div class="footer">
<button class="cancel">cancel</button>
<button class="confirm">confirm</button>
</div>
</div>
</div>

There is no big differents between one and multi.hope you can learn it by youself
$(function(){
$('.input_box').on('click',function(){
$('.sport').css('display','block');
})
$('.sport').click(function(e){
if(e.target.classList.contains('sport')){
$(this).css('display','none');
}
})
$('.sport').click(function(e){
if(e.target.classList.contains('sport')){
$(this).css('display','none');
}
})
$('.item').on('click',function(){
$(this).toggleClass('active');
})
// How to rewrite this program
$('.confirm').on('click',function(e){
// still only a little change here
$(".sport").trigger('click');
var texts = ""
$(".item.active").each(function(idx,item){
texts += $(item).attr("value")+" "
})
$(".input_box").val(texts)
})
});
.input_box {
width: 500px;
height: 60px;
font-size: 30px;
}
.sport {
background-color: rgba(0, 0, 0, 0.3);
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
display: none;
}
.sport_content {
width: 500px;
padding: 20px;
margin: 0 auto;
background-color: red;
}
.sport_content .title {
text-align: center;
padding: 10px;
font-size: 30px;
font-weight: 800;
}
.sport_content .category {
display: flex;
}
.sport_content .category .item {
width: 100px;
border: 1px solid #fff;
text-align: center;
border-radius: 10px;
padding: 10px;
margin: 10px;
}
.sport_content .category .active {
background-color: yellow;
}
.sport_content .footer {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.sport_content .footer .cancel {
padding: 20px;
background-color: #fff;
}
.sport_content .footer .confirm {
padding: 20px;
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="">Choose your favorite sport</label><br>
<input type="text" placeholder="Put in your favorite sports" class="input_box">
<div class="sport">
<div class="sport_content">
<h2 class="title">Aerobic exercise</h2>
<ul class="category">
<li class="item" value="RUN">RUN</li>
<li class="item" value="SWIM">Swim</li>
<li class="item" value="bicycle">bicycle</li>
</ul>
<h2 class="title">Strength training</h2>
<ul class="category">
<li class="item" value="weightlifting">weightlifting</li>
<li class="item" value="Stand up">Stand up</li>
<li class="item" value="Barbell">Barbell</li>
</ul>
<div class="footer">
<button class="cancel">cancel</button>
<button class="confirm">confirm</button>
</div>
</div>
</div>

Radio button does not hide/show section

Description:
I have 3 sections in my page that I want to do, each having a radio button to select an object.
Problem:
I am trying to figure out a problem where when I press the "online radio button" it will show up the section that I need. But when I press the "Face to Face" the online section keeps appearing.
Expected Result:
Each Radio button should work with each section and hide the other one.
HTML CODE:
$(document).ready(function() {
$("#Online").hide();
$("#Face").hide();
$("#Payment").hide();
});
$(document).on("change", "#choice1", function() {
var radioValue = $(this).val();
console.log(radioValue);
if (($(this).value = "Online")) showOnline();
else if (($(this).value = "Face To Face")) showFace();
});
function showOnline() {
$("#Online").show();
$("#Face").hide();
}
function showFace() {
$("#Face").show();
$("#Online").hide();
}
.dropbtn {
background-color: white;
color: black;
padding: 16px;
font-size: 50px;
border: 2px solid;
border-radius: 25px;
}
.dropdown {
position: relative;
display: inline-block;
margin-left: 40%;
margin-top: 8%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 350px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
font-size: 30px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: gray;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: gray;
}
.covid {
margin-left: 10%;
margin-top: 2%;
border: 2px solid;
width: 80%;
font-weight: bold;
}
.covid h2 {
text-align: center;
font-weight: bold;
}
.covid img {
position: absolute;
margin-left: 50%;
height: 200px;
}
.covid p {
font-size: 20px;
margin-left: 20%;
}
.textred {
font-size: 20px;
display: inline;
color: red;
}
.textgreen {
font-size: 20px;
display: inline;
color: green;
}
.status {
margin-left: 10%;
margin-top: 2%;
border: 2px solid;
width: 80%;
font-weight: bold;
}
.status h2 {
text-align: center;
font-weight: bold;
}
.china {
font-size: 20px;
margin-left: 20%;
display: inline;
}
.amazon {
font-size: 20px;
margin-left: 20%;
display: inline;
}
.reviews {
margin-left: 10%;
margin-top: 2%;
border: 2px solid;
width: 80%;
font-weight: bold;
}
.reviews h2 {
text-align: center;
font-weight: bold;
}
.bolded {
font-size: 20px;
display: inline;
}
.stars {
white-space: nowrap;
font-size: 20px;
magrin: 15%;
display: inline;
white-space: pre;
color: yellow;
}
.review {
font-size: 20px;
display: inline;
margin: 20%;
font-weight: normal;
}
.mainscreen {
background-color: white;
height: 1800px;
}
.avatar {
vertical-align: middle;
margin-left: 15%;
margin-top: 1%;
width: 50px;
height: 50px;
border-radius: 50%;
}
.choice1{
margin-left: 45%;
}
.choice3{
margin-left: 43%;
}
.choice4{
margin-left: 41%;
}
.button1{
margin-left: 48%;
}
.notreviews{
margin-top: -9%;
}
<div class="w3-panel w3-white w3-card-4 reviews">
<h2>How will you like your appointment to be?</h2>
<section id="choice1">
<form>
<input
type="radio"
name="choice"
class="choice1"
id="OL"
value="Online"
/>
Online
<input
type="radio"
name="choice"
class="choice2"
id="FTF"
value="Face To Face"
/>
Face To Face
</form>
<br />
<br />
<br />
<button onclick="submitAnswer()" class="button1">
Submit Answer
</button>
</section>
</div>
<!-- Online Section -->
<div class="w3-panel w3-white w3-card-4 reviews" id="Online">
<h2>Online Appointments</h2>
<section id="choice2">
<form>
<input
type="radio"
name="choice2"
class="choice3"
id="ZOOM"
value="Zoom"
/>
Zoom
<input
type="radio"
name="choice2"
class="choice2"
id="MEET"
value="Meet"
/>
Google Meet
</form>
<br />
<br />
<br />
<button onclick="submitOnlineAnswer()" class="button1">
Submit Answer
</button>
</section>
</div>
<!-- FTF Section -->
<div class="w3-panel w3-white w3-card-4 reviews" id="Face">
<h2>Face To Face Appointments</h2>
<section id="choice3">
<form>
<input type="radio" name="choice3" class="choice4" id="Amazon" value="Ama"/> Amazon Rainforst Location
<input type="radio" name="choice3" class="choice2" id="China" value="China" /> China Location
</form>
<br>
<br>
<br>
<button onclick="submitFTFAnswer()" class="button1" >Submit Answer</button>
</section>
</div>
<section id="section">
Jquery Code:
$(document).ready(function() {
$("#Online").hide();
$("#Face").hide();
$("#Payment").hide();
});
$(document).on("change", "#choice1", function() {
var radioValue = $(this).val();
console.log(radioValue);
if (($(this).value = "Online")) showOnline();
else if (($(this).value = "Face To Face")) showFace();
});
function showOnline() {
$("#Online").show();
$("#Face").hide();
}
function showFace() {
$("#Face").show();
$("#Online").hide();
}
What am I doing wrong and how can I fix this?

Advice on flawed logic per JavaScript calculator

How do I improve my logic for building my calculator? I cannot figure out how to integrate sin/cos/tan/percents correctly. This is my first real java script assignment and I am not sure how to go about handling all the errors I get. I frequently get not a number as the result. I know I cannot read everything into a variable to handle the calculations. But I don't know where to go from here.
function in1() {
document.calc.txt.value += '1'
}
function in2() {
document.calc.txt.value += '2'
}
function in3() {
document.calc.txt.value += '3'
}
function in4() {
document.calc.txt.value += '4'
}
function in5() {
document.calc.txt.value += '5'
}
function in6() {
document.calc.txt.value += '6'
}
function in7() {
document.calc.txt.value += '7'
}
function in8() {
document.calc.txt.value += '8'
}
function in9() {
document.calc.txt.value += '9'
}
function inAdd() {
document.calc.txt.value += '+'
}
function inSub() {
document.calc.txt.value += '-'
}
function inMult() {
document.calc.txt.value += '*'
}
function inDiv() {
document.calc.txt.value += '/'
}
function inDecimal() {
document.calc.txt.value += '.'
}
flag = 0;
function inSin() {
document.calc.txt.value += 'Sin('
flag = 1
}
function inCos() {
document.calc.txt.value += 'Cos('
flag = 2
}
function inTan() {
document.calc.txt.value += 'Tan('
flag = 3
}
function inPercent() {
document.calc.txt.value = calc.txt.value / 100;
}
var inputTest = document.getElementById("").value;
function equals() {
if (flag == 1) {
var input = calc.txt.value;
var newNumber = input.substring(4);
document.calc.txt.value = Math.sin(newNumber);
flag = 0
}
if (flag == 2) {
var input = calc.txt.value;
var newNumber = input.substring(4);
document.calc.txt.value = Math.cos(newNumber);
flag = 0
}
if (flag == 3) {
var input = calc.txt.value;
var newNumber = input.substring(4);
document.calc.txt.value = Math.tan(newNumber);
flag = 0
} else if (flag == 0) {
document.calc.txt.value = (eval(calc.txt.value))
}
}
.flexBoxContainer {
display: flex;
justify-content: space-around;
align-items: flex-start;
}
.title {
border: black 5px solid;
color: red;
padding: 2px;
font-size: 21;
width: 310px;
text-align: center;
}
.calculator {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
box-sizing: border-box;
}
.calculator .keys {
border: white 3px ridge;
height: 60px;
width: 75px;
}
.input-box {
border: white 3px ridge;
height: 60px;
width: 236px;
flex-basis: 66%;
}
.input-display {
border: black 3px solid;
background-color: white;
height: 45px;
width: 233x;
flex-basis: 66%;
text-align: right;
}
.center {
display: flex;
flex-direction: column;
justify-content: center;
;
}
.container1 {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
#media (min-width: 381px) {
.calculator {
width: 380px;
}
}
/* button formatting below */
.button1 {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 19px;
text-align: center;
display: inline-block;
font-size: 36px;
cursor: pointer;
}
.button2 {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 20px;
text-align: center;
display: inline-block;
font-size: 30px;
cursor: pointer;
}
.buttonSin {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 7px;
text-align: center;
display: inline-block;
font-size: 30px;
cursor: pointer;
}
.buttonCos {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 3px;
text-align: center;
display: inline-block;
font-size: 30px;
cursor: pointer;
}
.buttonTan {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 2px;
text-align: center;
display: inline-block;
font-size: 30px;
cursor: pointer;
}
.button3 {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 17px;
text-align: center;
display: inline-block;
font-size: 30px;
cursor: pointer;
}
.buttonMinus {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 22px;
text-align: center;
display: inline-block;
font-size: 30px;
cursor: pointer;
}
.buttonDiv {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 21px;
text-align: center;
display: inline-block;
font-size: 30px;
cursor: pointer;
}
.buttonDec {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 23px;
text-align: center;
display: inline-block;
font-size: 30px;
cursor: pointer;
}
.buttonPer {
border: black 10px solid;
color: white;
background-color: blue;
padding: 1px 12px;
text-align: center;
display: inline-block;
font-size: 30px;
cursor: pointer;
}
<html>
<title>JavaScript Calculator Assignment</title>
<head>
<link rel="stylesheet" href="calculator.css">
<script type="text/javascript" src="calculator.js"></script>
</head>
<div class="flexBoxContainer">
<form class="calculator" name="calc">
<div class="title">JavaScript Calculator</div>
<div class="container1">
<div class="input-box center">
<input class="value input-box center" type="text" name="txt" readonly="">
<!--<span class ="" onclick="document.calc.txt.value +=''"></span> <!--do we need this?-->
</div>
<div class="keys">
<span class="button1" onclick="document.calc.txt.value =''">c</span>
</div>
</div>
<div class="keys">
<span class="button2" onclick="in1()">1</span>
</div>
<div class="keys">
<span class="button2" onclick="in2()">2</span>
</div>
<div class="keys">
<span class="button2" onclick="in3()">3</span>
</div>
<div class="keys">
<span class="buttonSin" onclick="inSin()">Sin</span>
</div>
<div class="keys">
<span class="button2" onclick="in4()">4</span>
</div>
<div class="keys">
<span class="button2" onclick="in5()">5</span>
</div>
<div class="keys">
<span class="button2" onclick="in6()">6</span>
</div>
<div class="keys">
<span class="buttonCos" onclick="inCos()">Cos</span>
</div>
<div class="keys">
<span class="button2" onclick="in7()">7</span>
</div>
<div class="keys">
<span class="button2" onclick="in8()">8</span>
</div>
<div class="keys">
<span class="button2" onclick="in9()">9</span>
</div>
<div class="keys">
<span class="buttonTan" onclick="inTan()">Tan</span>
</div>
<div class="keys">
<span class="button3" onclick="inAdd()">+</span>
</div>
<div class="keys">
<span class="buttonMinus" onclick="inSub()">-</span>
</div>
<div class="keys">
<span class="button2" onclick="inMult()">*</span>
</div>
<div class="keys">
<span class="buttonDiv" onclick="inDiv()">/</span>
</div>
<div class="keys">
<span class="buttonDec" onclick="inDecimal()">.</span>
</div>
<div class="keys">
<span class="button2" onclick="document.calc.txt.value +='0'">0</span>
</div>
<div class="keys">
<span class="button3" onclick="equals()"> = </span>
</div>
<div class="keys">
<span class="buttonPer" onclick="inPercent()">%</span>
</div>
</form>
</div>
</html>

dynamic html element issue

when one of menus is chosen and option in select tag, apply button can be worked to be placed to be dynamic html element in Panel below. when a user clicks cancel button, that dynamic html element will be deleted.
As for an issue, when a user chooses one menu, dynamic html element will be redundantly placed to be in panels.
For example,
apply menu 2 > create dynamic html element in panel of menu2 > cancel menu 2 > apply menu other menu (3 or 1) > redundantly create dynamic html elements in previous panel of menu 2 and current panel of menu.
How am I able to completely delete dynamic html element when I click cancel button??
$(function() {
$(".section4 ul li:first-child").addClass("on");
//section4 ul li on
$("section.section4 ul li").click(function() {
$(this).addClass("on");
$("section.section4 ul li.on").not(this).removeClass("on");
});
// panel
$(".PaNel").hide();
$(".PaNel:eq(0)").show();
//addEventListner
$(".section4 ul li").click(function() {
$(".PaNel").hide();
$("#tab" + ($(this).index() + 1)).show();
});
//메뉴 선택
$(".section2").find("article").click(function() {
$(this).addClass("On");
$("article.On").not(this).removeClass("On");
});
//비활성신청
$(".btn2").css({
"display": "none"
});
//상단 메뉴
$("article").click(function() {
if ($(this).hasClass("On") && $("#menuSelect option:selected").index() > 0) {
$(".btn1").css({
"background": "red"
});
//$(".btn2").css({"display":"block"});
} else {
$(".btn1").css({
"display": "block"
});
$(".btn2").css({
"display": "none"
});
}
});
// while article is clicked, menuSelect.index() > 0
$("body").click(function() {
if ($("article").hasClass("On")) {
if ($("#menuSelect option:selected").index() > 0) {
$(".btn1").css({
"display": "none"
});
$(".btn2").css({
"display": "block"
});
}
}
})
$(".area_popup").addClass("none")
$(".end").addClass("none");
$(".section2").children("article").one("click", function() {
console.log($(this).index())
var target = $("#tab" + $(this).index())
$("#Apply").click(function() {
var menuSelect = document.getElementById("menuSelect");
//console.log(menuSelect);
switch (menuSelect.value) {
case "a":
case "b":
case "c":
case "d":
target.find(".Apply_Check").append("<div class='User'>" + menuSelect.value + "</div>");
break;
}
$(".end").removeClass("none");
$("#Apply").addClass("none");
//alert("신청 완료 되었습니다")
})
})
$(document).on("click", '.end', function() {
//본인꺼만
$(".User").remove();
$(".end").addClass("none");
$("#Apply").removeClass("none");
});
$("article").click(function() {
if (parseInt($(this).find("span").text()) == 0) {
//$(".button").css({"display":"none"});
//$(".btn1,.btn2, .end").css({"display":"none"})
//$(".btn4").css({"display":"block"});
$(".area_popup3").css({
"display": "block"
});
} else {
//$(".button").css({"display":"block"});
//$(".btn4").css({"display":"none"});
}
});
//메뉴 하$(단 클릭시 섹션 2 남은 수량이 없는 경우
$(".section4 ul").children("li").click(function() {
var article = $('article:eq(' + $(this).index() + ')')
if (parseInt(article.find("span").text()) == 0) {
$(".area_popup3").css({
"display": "block"
});
}
})
$("body").click(function(e) {
if ($("#menuSelect option:selected").index() == 0) {
$(".btn1").css({
"display": "block"
});
$(".btn2").css({
"display": "none"
});
}
})
});
function fn_popup_close(name) {
//$('body').removeClass('fixed');
//body class removeClass
$('.' + name).hide();
}
function fn_popup_open(name) {
//$('body').addClass('fixed');
$('.' + name).show();
}
/*//////////////////reset//////////////////////////////////////*/
* {
margin: 0;
padding: 0;
}
body,
header,
footer,
section,
nav,
article,
figure,
aside,
details,
main {
margin: 0;
padding: 0;
}
header,
footer,
section,
nav,
article,
figure,
aside,
details,
main {
display: block;
}
a:link,
a:visited {
color: #000;
text-decoration: none;
}
/*a:hover, a:focus{color:#aaa; text-decoration:none;}*/
body {
color: #333;
}
li {
list-style: none;
}
input[type="button"] {
cursor: pointer;
}
input[type=button],
select {
border-radius: 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/*//////////////////reset//////////////////////////////////////*/
#wrap {
max-width: 100%;
margin: 0 auto;
}
/*//////////////section1/////////////////////////////////////*/
section.section1 {
width: 100%;
/*background:#F87141;*/
}
section.section1 .screen_info {
width: 100%;
overflow: hidden;
}
section.section1 .screen_info ul {
width: 300%;
overflow: hidden;
}
section.section1 .screen_info ul li {
width: 31.63%;
float: left;
padding: 10px 1% 10px .7%;
}
/*//////////////section2/////////////////////////////////////*/
section.section2 {
width: 100%;
overflow: hidden;
border: 1px solid #ccc;
border-width: 1px 0;
}
section.section2 h3 {
width: 100%;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ccc;
text-indent: 2%;
}
section.section2 article {
width: 31.33%;
padding-left: 2%;
height: 100px;
float: left;
}
section.section2 article div {
border-right: 1px solid #ccc;
}
.On {
background: #d4dbdd;
}
/*section.section2 article:last-child{border-right:none;}*/
section.section2 article h2 {
width: 100%;
height: 30px;
font-size: 14px;
line-height: 30px;
}
section.section2 article p.FoodName {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
font-weight: 900;
font-size: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
section.section2 article p.FoodCnt {
width: 90%;
height: 30px;
line-height: 30px;
text-align: right;
font-size: 13px;
}
/*//////////////section2/////////////////////////////////////*/
/*//////////////section3/////////////////////////////////////*/
section.section3 {
width: 100%;
padding-top: 30px;
}
section.section3 .Select {
border-top: 1px solid #ccc;
position: relative;
}
.Select {
display: block;
content: "";
clear: both;
}
section.section3 .Select p.Selected {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
section.section3 .Select p {
font-weight: 900;
text-indent: 9%;
}
section.section3 .Select p.Selected span {
cursor: pointer;
position: absolute;
right: 20px;
top: 4px;
}
section.section3 .Select p.Selected span img {
width: 10px;
}
.selection {
border-bottom: 1px solid #ccc;
}
/*.on{background:#ccc;}*/
section.section3 select {
width: 100%;
height: 30px;
background: #ECEFF0;
border: 1px solid #ccc;
border-width: 1px 0;
}
select#menuSelect::-ms-expand {
display: none;
}
/*IE*/
select#menuSelect {
appearance: none;
-webkit-appearance: none;
/*for chrome*/
-moz-appearance: none;
/*for firefox*/
background: url(./images/next_shadow.png) no-repeat right;
background-position-x: 97%;
background-size: 14px 24px;
text-indent: 2%;
}
section.section3 p.Avail_time {
width: 95%;
text-align: right;
line-height: 30px;
height: 30px;
padding-right: 5%;
}
section.section3 p input[type=button] {
width: 100%;
border: 1px solid #ccc;
border-width: 1px 0;
background: #F87141;
height: 40px;
color: #fff;
}
section.section3 p.btn1 input[type=button] {
background: #aaa;
}
section.section3 p.end input[type=button] {
background: #aaa;
}
.none {
display: none;
}
/*//////////////section3/////////////////////////////////////*/
/*//////////////section4/////////////////////////////////////*/
section.section4 {
padding-top: 30px;
}
section.section4 ul {
width: 100%;
overflow: hidden;
border: 1px solid #ccc;
border-width: 1px 0;
}
section.section4 ul li {
width: 25%;
height: 30px;
line-height: 30px;
float: left;
font-weight: 900;
font-size: 13px;
text-align: center;
background: #fff;
}
section.section4 ul li a {
display: block;
border-right: 1px solid #ccc;
}
.on>a {
background: #aaa;
color: #fff;
}
section.section4 ul li:last-child a {
border: none;
}
section.section4 .memo {
width: 100%;
}
section.section4 .memo input {
width: 100%;
}
section.section4 article.PaNel {
width: 98%;
padding-left: 2%;
height: 400px;
}
.Apply_Check {
width: 100%;
}
.Apply_Check p.Count {
width: 100%;
height: 50px;
line-height: 50px;
font-weight: 900;
}
#tab4 {
padding: 10px;
}
#tab4 p {
padding-bottom: 20px;
}
/*//////////////dynamic HTML Element ////////////////////////////////////*/
.User {
width: 100%;
height: 50px;
background: #aaa;
}
/*//////////////dynamic HTML Element ////////////////////////////////////*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<section class="section2">
<h3>choose menu</h3>
<article>
<div>
<h2>menu 1.</h2>
</div>
</article>
<article class="scene_two">
<div>
<h2>menu 2.</h2>
</div>
</article>
<article class="scene_three">
<div>
<h2>menu 3.</h2>
</div>
</article>
</section>
<section class="section3">
<select id="menuSelect">
<option value="menu" selected="selected">choose one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
<!--<div class="Select">
<p class="Selected" id="reasonSelect" onclick="result();">신청사유 선택<span><img src="./images/next_shadow.png" alt="arrow"/></span></p>
<div class="selection">
<p>외근/출장</p>
<p>당직</p>
<p>당직</p>
<p>기타</p>
</div>
</div>-->
<p class="btn1 button"><input type="button" value="apply" /></p>
<p class="btn2 button"><input type="button" value="apply" id="Apply" /></p>
<p class="end button"><input type="button" value="cancel" onclick="fn_popup_open('area_popup')" /></p>
<!--<p class="btn4 button"><input type="button" value="신청 마감" onclick="fn_popup_open('area_popup')"/></p>-->
<!--<select>
<option>dd</option>
<option>dd</option>
<option>dd</option>
<option>ddd</option>
</select>-->
</section>
</section>
<section class="section4">
<ul>
<li>menu1</li>
<li class="scene_two">menu2</li>
<li class="scene_three">menu3</li>
<li>info</li>
</ul>
<article class="PaNel" id="tab1">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl1">1</span></p>
</div>
</article>
<article class="PaNel" id="tab2">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl2">2</span></p>
</div>
</article>
<article class="PaNel" id="tab3">
<div class="Apply_Check">
<p class="Count">Panel <span id="ppl3">3</span></p>
</div>
</article>
<article class="PaNel" id="tab4">
information
</article>
</section>
</div>

You could use JQuery's empty command, it removes all child elements from the parent element
$("#parent").empty()

How to add text in the data attribute using jQuery?

Look at my fiddle code:
http://jsfiddle.net/hassaan39/0kourse6/
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.pin_head {
background: #eee;
}
.pin_head:after {
content: "";
display: block;
clear: both;
height: 0;
}
.pin_head > div {
float: left;
margin-left: -1px;
border-left: 1px solid #ddd;
}
.pin_head > div strong {
font-size: 13px;
padding: 0 10px;
line-height: 50px;
display: block;
}
.pin_head > div.pin_id strong {
line-height: 50px;
padding: 0;
text-align: center;
}
.pin_head > div.pin_id {
margin: 0;
border-left: 0px none;
}
.pin_id {
width: 7%;
border-left: 0px none;
}
.pin_pro {
width: 14%;
}
.pin_date {
width: 7%;
}
.pin_fname {
width: 12%;
}
.pin_lname {
width: 12%;
}
.pin_email {
width: 11%;
}
.pin_phone {
width: 11%;
}
.pin_pass {
width: 20%;
}
.pin_lists ul {
padding: 0;
margin: 0;
}
.pin_lists ul li {
list-style: none;
border-bottom: 1px solid #ddd;
overflow: hidden;
}
.pin_lists ul li:last-child {
border-bottom: 0px none;
}
.pin_lists ul li:nth-child(even) {
background: #fdfbfc;
}
.pin_lists ul li:after {
content: "";
display: block;
clear: both;
height: 0;
}
.pin_lists ul li > div {
float: left;
margin-left: -1px;
border-left: 1px solid #ddd;
padding: 7px 5px;
min-height: 77px;
word-wrap: break-word;
margin-bottom: -99999px;
padding-bottom: 100004px;
}
.pin_delete {
width: 6.7%;
}
.pin_delete a {
display: block;
text-transform: uppercase;
text-align: center;
line-height: 44px;
font-weight: bold;
}
.pin_lists ul li .pin_id {
font-weight: bold;
line-height: 44px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pin_head">
<div class="pin_id"><strong>Order ID</strong>
</div>
<div class="pin_pro"><strong>Product Name</strong>
</div>
<div class="pin_date"><strong>Dated</strong>
</div>
<div class="pin_fname"><strong>First Name</strong>
</div>
<div class="pin_lname"><strong>Last Name</strong>
</div>
<div class="pin_email"><strong>Email</strong>
</div>
<div class="pin_phone"><strong>Phone</strong>
</div>
<div class="pin_pass"><strong>Password</strong>
</div>
</div>
<div class="pin_lists">
<ul>
<li>
<div class="pin_id" data-col="Order ID">654</div>
<div class="pin_pro" data-col="Product Name">Low Voltage</div>
<div class="pin_date" data-col="Dated">2015-08-07</div>
<div class="pin_fname" data-col="First Name">John</div>
<div class="pin_lname" data-col="Last Name">Tait</div>
<div class="pin_email" data-col="Email">johnson#mail.com</div>
<div class="pin_phone" data-col="Phone">123-456-789</div>
<div class="pin_pass" data-col="Password">passcode</div>
<div class="pin_delete" data-col="Change Record">Edit
</div>
</li>
<li>
<div class="pin_id" data-col="Order ID">654</div>
<div class="pin_pro" data-col="Product Name">Low Voltage</div>
<div class="pin_date" data-col="Dated">2015-08-07</div>
<div class="pin_fname" data-col="First Name">John</div>
<div class="pin_lname" data-col="Last Name">Tait</div>
<div class="pin_email" data-col="Email">johnson#mail.com</div>
<div class="pin_phone" data-col="Phone">123-456-789</div>
<div class="pin_pass" data-col="Password">passcode</div>
<div class="pin_delete" data-col="Change Record">Edit
</div>
</li>
</ul>
</div>
I want to add text from (pin_head > div) in (.pin_lists li) data-col, using .each() function jQuery. I am here hard coding the values.
Please assist me the good road. :)
I am new in jQuery.

I suppose you want the header of each column to be the attribute data-col for each cell.
You can do something like this:
$(document).ready(function() {
var list = $('.pin_lists li');
$('.pin_head div').each(function(item) {
var _this = this;
list.each(function(element) {
$($(this).children()[item]).attr('data-col', $(_this).find('strong').text())
})
})
})
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.pin_head {
background: #eee;
}
.pin_head:after {
content: "";
display: block;
clear: both;
height: 0;
}
.pin_head > div {
float: left;
margin-left: -1px;
border-left: 1px solid #ddd;
}
.pin_head > div strong {
font-size: 13px;
padding: 0 10px;
line-height: 50px;
display: block;
}
.pin_head > div.pin_id strong {
line-height: 50px;
padding: 0;
text-align: center;
}
.pin_head > div.pin_id {
margin: 0;
border-left: 0px none;
}
.pin_id {
width: 7%;
border-left: 0px none;
}
.pin_pro {
width: 14%;
}
.pin_date {
width: 7%;
}
.pin_fname {
width: 12%;
}
.pin_lname {
width: 12%;
}
.pin_email {
width: 11%;
}
.pin_phone {
width: 11%;
}
.pin_pass {
width: 20%;
}
.pin_lists ul {
padding: 0;
margin: 0;
}
.pin_lists ul li {
list-style: none;
border-bottom: 1px solid #ddd;
overflow: hidden;
}
.pin_lists ul li:last-child {
border-bottom: 0px none;
}
.pin_lists ul li:nth-child(even) {
background: #fdfbfc;
}
.pin_lists ul li:after {
content: "";
display: block;
clear: both;
height: 0;
}
.pin_lists ul li > div {
float: left;
margin-left: -1px;
border-left: 1px solid #ddd;
padding: 7px 5px;
min-height: 77px;
word-wrap: break-word;
margin-bottom: -99999px;
padding-bottom: 100004px;
}
.pin_delete {
width: 6.7%;
}
.pin_delete a {
display: block;
text-transform: uppercase;
text-align: center;
line-height: 44px;
font-weight: bold;
}
.pin_lists ul li .pin_id {
font-weight: bold;
line-height: 44px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pin_head">
<div class="pin_id"><strong>Order ID</strong>
</div>
<div class="pin_pro"><strong>Product Name</strong>
</div>
<div class="pin_date"><strong>Dated</strong>
</div>
<div class="pin_fname"><strong>First Name</strong>
</div>
<div class="pin_lname"><strong>Last Name</strong>
</div>
<div class="pin_email"><strong>Email</strong>
</div>
<div class="pin_phone"><strong>Phone</strong>
</div>
<div class="pin_pass"><strong>Password</strong>
</div>
</div>
<div class="pin_lists">
<ul>
<li>
<div class="pin_id">654</div>
<div class="pin_pro">Low Voltage</div>
<div class="pin_date">2015-08-07</div>
<div class="pin_fname">John</div>
<div class="pin_lname">Tait</div>
<div class="pin_email">johnson#mail.com</div>
<div class="pin_phone">123-456-789</div>
<div class="pin_pass">passcode</div>
<div class="pin_delete">Edit
</div>
</li>
<li>
<div class="pin_id">654</div>
<div class="pin_pro">Low Voltage</div>
<div class="pin_date">2015-08-07</div>
<div class="pin_fname">John</div>
<div class="pin_lname">Tait</div>
<div class="pin_email">johnson#mail.com</div>
<div class="pin_phone">123-456-789</div>
<div class="pin_pass">passcode</div>
<div class="pin_delete">Edit
</div>
</li>
</ul>
</div>

Use the following jQuery to dynamically create the data-col elements on your li based on the contents of your pin_head div:
$(".pin_lists div").each(function() {
$(this).attr("data-col", $($(".pin_head").children()[$(this).index()]).find("strong").text());
});
Live Demo:
$(".pin_lists div").each(function() {
$(this).attr("data-col", $($(".pin_head").children()[$(this).index()]).find("strong").text());
});
* {
margin:0px;
padding:0px;
box-sizing:border-box;
}
.pin_head {
background: #eee;
}
.pin_head:after {
content:"";
display:block;
clear:both;
height:0;
}
.pin_head > div {
float:left;
margin-left:-1px;
border-left: 1px solid #ddd;
}
.pin_head > div strong {
font-size: 13px;
padding:0 10px;
line-height:50px;
display:block;
}
.pin_head > div.pin_id strong {
line-height: 50px;
padding: 0;
text-align: center;
}
.pin_head > div.pin_id {
margin:0;
border-left:0px none;
}
.pin_id {
width:7%;
border-left: 0px none;
}
.pin_pro {
width:14%;
}
.pin_date {
width:7%;
}
.pin_fname {
width:12%;
}
.pin_lname {
width:12%;
}
.pin_email {
width:11%;
}
.pin_phone {
width:11%;
}
.pin_pass {
width:20%;
}
.pin_lists ul {
padding:0;
margin:0;
}
.pin_lists ul li {
list-style:none;
border-bottom: 1px solid #ddd;
overflow:hidden;
}
.pin_lists ul li:last-child {
border-bottom:0px none;
}
.pin_lists ul li:nth-child(even) {
background: #fdfbfc;
}
.pin_lists ul li:after {
content:"";
display:block;
clear:both;
height:0;
}
.pin_lists ul li > div {
float:left;
margin-left:-1px;
border-left: 1px solid #ddd;
padding:7px 5px;
min-height:77px;
word-wrap:break-word;
margin-bottom: -99999px;
padding-bottom: 100004px;
}
.pin_delete {
width:6.7%;
}
.pin_delete a {
display:block;
text-transform:uppercase;
text-align:center;
line-height:44px;
font-weight:bold;
}
.pin_lists ul li .pin_id {
font-weight:bold;
line-height:44px;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pin_head">
<div class="pin_id"><strong>Order ID</strong>
</div>
<div class="pin_pro"><strong>Product Name</strong>
</div>
<div class="pin_date"><strong>Dated</strong>
</div>
<div class="pin_fname"><strong>First Name</strong>
</div>
<div class="pin_lname"><strong>Last Name</strong>
</div>
<div class="pin_email"><strong>Email</strong>
</div>
<div class="pin_phone"><strong>Phone</strong>
</div>
<div class="pin_pass"><strong>Password</strong>
</div>
</div>
<div class="pin_lists">
<ul>
<li>
<div class="pin_id">654</div>
<div class="pin_pro">Low Voltage</div>
<div class="pin_date">2015-08-07</div>
<div class="pin_fname">John</div>
<div class="pin_lname">Tait</div>
<div class="pin_email">johnson#mail.com</div>
<div class="pin_phone">123-456-789</div>
<div class="pin_pass">passcode</div>
<div class="pin_delete">Edit
</div>
</li>
<li>
<div class="pin_id">654</div>
<div class="pin_pro">Low Voltage</div>
<div class="pin_date">2015-08-07</div>
<div class="pin_fname">John</div>
<div class="pin_lname">Tait</div>
<div class="pin_email">johnson#mail.com</div>
<div class="pin_phone">123-456-789</div>
<div class="pin_pass">passcode</div>
<div class="pin_delete">Edit
</div>
</li>
</ul>
</div>
That live demo produces this result:

In jQuery you can do something like this:
$("#yourElement").data("yourKeyName", "yourValue")
For additional information you can visit this site of the documentation

You could do something like this
var array = [];
$('.pin_head > div').each(function(index, obj) {
array[index] = $(this).text();
});
$('li>div').each(function(index, obj) {
var data = $(this).attr("data-col", array[index]);
});

We Keep Coding

JavaScript is the programming language of the Web.

How do I increment data attributes(int) using jquery? - javascript

Related

How to use jquery or javaScript to select an item and click OK to put the item in the input box?

Radio button does not hide/show section

Advice on flawed logic per JavaScript calculator

dynamic html element issue

How to add text in the data attribute using jQuery?

Categories

Resources