#javascript #html #jquery #css
#javascript #HTML #jquery #css
Вопрос:
Я хочу добавить новый div при нажатии на li или ссылку
Проблема в том, что когда я нажимаю на первый div, он работает. Но я хочу добавить div при нажатии на непосредственный предыдущий li. Предположим, когда я нажимаю на «1», будет создан новый div «2». Затем, если я нажму на «2», откроется новый div «3» и так далее. После этого, если я нажму на любой предыдущий div, все div закроются, кроме следующего div и предыдущих div. Предположим, открыто 1,2,3,4,5 div. Если я нажму на 2, будет отображаться только 1,2,3 div. другие будут скрыты.
Как я могу это сделать?
$('.title').on('click', function(e) {
var isPresent = false;
var whoIsIt = $(this).attr('data');
$('#data .data').each(function(index, element) {
if ($(this).attr('data-conversation-between') == whoIsIt) {
isPresent = true;
}
});
if (!isPresent) {
$('#data').append('<div class="data" data-conversation-between="' whoIsIt '"><ul><li class="title"><a href="#"><img src="img/1.jpg" class="profile" alt=""><div class="details"> <p>Tusher</p><p>Designation</p></div></a> </li></ul> </div>');
}
});
$(document).ready(function() {
$("li").click(function() {
$("li").removeClass("active");
$(this).parent().prepend($(this));
$(this).addClass("active");
});
}); ul {
padding: 0px;
}
.data {
border: 1px solid;
margin: 5px;
float: left;
width: 13%;
}
.data a {
text-decoration: none;
}
.data ul {
list-style-type: none;
}
.profile {
height: 40px;
width: 40px;
float: left;
margin: 0px 13px;
}
.details {
font-size: 13px;
}
li.title {
border-bottom: 2px solid #ddd;
overflow: hidden;
margin-bottom: 5px;
padding: 5px 0;
}
.active {
background: #ececec;
}
p {
margin: 0px;
padding: 0px;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="data">
<ul>
<li class="title">
<a href="#">
<img src="img/1.jpg" class="profile" alt="">
<div class="details">
<p>Tusher</p>
<p>Designation</p>
</div>
</a>
</li>
</ul>
</div>
<div id="data">
</div> Ответ №1:
Просто делегируйте
$('.main').on('click','.title:last', function(e) {
и
$('#data').on('click', '.title', function(e) {
const hasMore = $(this).closest(".data").next().length;
if (hasMore>0) $(this).closest(".data").siblings().remove(); // this should have worked
})
$(function() {
$('.main').on('click', '.title:last', function(e) {
const $new = $(this).closest('.data').clone();
$('.details p',$new).text('Tusher ' $('.main .data').length)
$('.main').append($new)
});
$('.main').on('click', '.title', function(e) {
const hasMore = $(this).closest('.data').nextAll().length
if (hasMore > 1) {
$(this).closest(".data").siblings().remove();
}
})
}); ul {
padding: 0px;
}
.data {
border: 1px solid;
margin: 5px;
float: left;
width: 13%;
}
.data a {
text-decoration: none;
}
.data ul {
list-style-type: none;
}
.profile {
height: 40px;
width: 40px;
float: left;
margin: 0px 13px;
}
.details {
font-size: 13px;
}
li.title {
border-bottom: 2px solid #ddd;
overflow: hidden;
margin-bottom: 5px;
padding: 5px 0;
}
.active {
background: #ececec;
}
p {
margin: 0px;
padding: 0px;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="data">
<ul>
<li class="title">
<a href="#">
<img src="img/1.jpg" class="profile" alt="">
<div class="details">
<p>Tusher</p>
<p>Designation</p>
</div>
</a>
</li>
</ul>
</div>
</div> Комментарии:
1. Отлично! Как насчет части удаления. После открытия нескольких div, если я нажму на любой из них, будут видны все предыдущие div и только следующий div, другие скроются. Если я нажму «2», div. 1,2,3 не будет видно. Другие будут скрыты.
2. Хм, я не уверен, почему мой код удаления не работает. Возможно, вы можете задать другой вопрос?
3. Все идеально. За исключением одной проблемы. Внутри div будет несколько li. Это будет происходить динамически. Каждый li должен быть работоспособным. И если я нажму на первый div, он должен открыть только второй div. Не могли бы вы помочь мне больше?
4. Я обновил скрипт. Теперь проще, у меня нет данных div
Ответ №2:
Я разобрался со своей проблемой.
function childData(_id) {
var tRow = $(".organogram li").length,
row = parseInt(_id) 1;
for (var i = row; i <= tRow; i ) {
$("#dept-" i).remove();
}
var data = "<li id='dept-" row "' class='team'>"
"<div class='data'><ul> "
"<li class='title' onclick='thisNode(this)'><a href='#'><img src='img/1.jpg' class='profile' ><div class='details'> <p>Tusher1</p><p>Designation</p></div></a> </li>"
"<li class='title' onclick='thisNode(this)'><a href='#'><img src='img/1.jpg' class='profile' ><div class='details'> <p>Tusher2</p><p>Designation</p></div></a> </li>"
"<li class='title' onclick='thisNode(this)'><a href='#'><img src='img/1.jpg' class='profile' ><div class='details'> <p>Tusher3</p><p>Designation</p></div></a> </li>"
"</ul> </div></li>";
$(".organogram").append(data);
}
function thisNode(_this){
var _id = $(_this).closest(".team").attr("id").match(/d /);
$(_this).closest("ul").find("li").removeClass( "active" );
$(_this).addClass( "active" );
$(_this).closest("ul").prepend($(_this));
childData(_id);
} ul{
padding:0px;
list-style-type: none;
}
.data {
border: 1px solid;
margin: 5px;
float: left;
width: 13%;
}
.data a{
text-decoration: none;
}
.data ul{
list-style-type: none;
}
.profile{
height: 40px;
width: 40px;
float: left;
margin: 0px 13px;
}
.details{
font-size: 13px;
}
li.title {
border-bottom: 2px solid #ddd;
overflow: hidden;
margin-bottom: 5px;
padding: 5px 0;
}
.active{
background:#ececec;
}
p{
margin:0px;
padding: 0px;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="organogram">
<li id='dept-1' class='team'>
<div class='data'>
<ul>
<li class='title' onclick='thisNode(this)'>
<a href='#'>
<img src='img/1.jpg' class='profile' >
<div class='details'>
<p>Tusher1</p>
<p>Designation</p>
</div>
</a>
</li>
<li class='title' onclick='thisNode(this)'>
<a href='#'>
<img src='img/1.jpg' class='profile' >
<div class='details'>
<p>Tusher2</p>
<p>Designation</p>
</div>
</a>
</li>
<li class='title' onclick='thisNode(this)'>
<a href='#'>
<img src='img/1.jpg' class='profile' >
<div class='details'>
<p>Tusher3</p>
<p>Designation</p>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>