Всем привет!
Не могу решить вопрос отображения элементов относительно друг друга.
Буду благодарен если подскажите.
1. Нужно чтобы при появлении одного элемента - все остальные скрывались. Делал так, но не выходит...
$(this).parents("#photo-block .brand-panel #hide").hide();
2. Перестала работать привязка элемента к другом, когда динамически генерирую контент. Нужно чтобы работало.
Статически работает вот так -
http://teleport.ink/index_a.html
Вот функция.
function position() {
panel_info.position({
of: $(this),
my: "center center",
at: "center bottom+6",
collision: "flipfit",
within: image_mark
});
}
Вот весь код JS
$(document).ready(function(){
$(".mark-brand").click(function(){
var panel_info = $(this).next('.brand-panel'); //Панель относящаяся к данной метке
var switch_status = $(this).next('.brand-panel').attr("id"); //Берем значение переключателя
var image_mark = $(this).siblings("#image");
//Функция, которая приклеивает панель к метке.
function position() {
panel_info.position({
of: $(this),
my: "center center",
at: "center bottom+6",
collision: "flipfit",
within: image_mark
});
}
//Взависимости от значения id либо скрываем, либо показываем панель
if ( switch_status == "hide" ) {
position();
$(this).next('.brand-panel').attr("id","show");
panel_info.show();
$(this).parents("#photo-block .brand-panel #hide").hide(); //Здесь должны скрываться все панели с id hide
}
else if ( switch_status == "show")
{
panel_info.hide();
$(this).next('.brand-panel').attr("id","hide");
}
});
});
А вот html
<div class="photo-block">
{% for tag in photo.get_tags %}
{% if tag.z_position == 1 %}
<div class="mark-brand" style="top:{{ tag.y_position }}; left:{{ tag.x_position }};" id="{{ tag.id }}">
<svg class="star-mark star-green-active" viewBox="0 0 105 105">
<use xlink:href="#star-mark"></use>
</svg>
</div>
<div class="brand-panel active" id="show">
<a href="{{ tag.url }}">
<p>{{ tag.brand_name }}</p>
<div class="button-mark">
<svg class="arrow-right-icon arrow-right-icon-green" viewBox="0 0 15.15 22">
<use id="mark-close-use" xlink:href="#arrow-right-icon"></use>
</svg>
</div>
</a>
</div>
{% else %}
<div class="mark-brand" style="top:{{ tag.y_position }}; left:{{ tag.x_position }};" id="{{ tag.id }}">
<svg class="star-mark" viewBox="0 0 105 105">
<use xlink:href="#star-mark"></use>
</svg>
</div>
<div class="brand-panel position" id="hide">
<a href="{{ tag.url }}">
<p>{{ tag.brand_name }}</p>
<div class="button-mark">
<svg class="arrow-right-icon arrow-right-icon-green" viewBox="0 0 15.15 22">
<use id="mark-close-use" xlink:href="#arrow-right-icon"></use>
</svg>
</div>
</a>
</div>
{% endif %}
{% endfor%}
<img src="/uploads/{{ photo.image }}" id="image"/>
<a href="/add/{{ item.id }}" class="button-add-edit" id="button-add-edit"></a>
</div>
Спасибо.
