JQuery, как на элементе нажмите скрыть только li, связанный с элементом, а не другие

Question

У меня проблемы. По сути, я добавляю изображения, которые загружаются с помощью функции загрузки в jQuery, на страницу через файл note.php

Этот файл будет отображать фотографии и тому подобное. Проблема, с которой я сталкиваюсь, заключается в следующем: для фотографий я буду добавлять поддержку Thickbox, которую я могу сделать, используя тег rel. Тем не менее, я хочу дать своим пользователям возможность удалять эти фотографии, нажав на значок, который появится. Вот структура:

e
<ul class="imglist">

<li>
<img src="http://localhost/fileserver/3/2lV2H075.jpg" width="308" height="auto"    alt="Image1" />

<div class="actions">   
<a href="#" class="imglistbutton">
<img src="http://localhost/fileserver/1/j5357n7X.png" width="16" height="16" alt="Delete" />
</a>
</div>

</li>

<br/>

<li>
<img src="http://localhost/fileserver/3/2lV2H075.jpg" width="308" height="auto"    alt="Image2" />

 <div class="actions">  
 <a href="#" class="imglistbutton">
 <img src="http://localhost/fileserver/1/j5357n7X.png" width="16" height="16" alt="Delete" />
 </a>
 </div>

 </li>

 <br/>
 </ul>

Итак, когда пользователь нажимает

<#img src = "http://localhost/fileserver/1/j5357n7X.png" width =" 16 "height =" 16 "alt =" Delete "/>

код jQuery закроет конкретный тег LI, в котором был выбран этот элемент.

Вот код, который мне не удался:

 <script type="text/javascript">
$(document).ready(function() {

$(".imglistbutton").live("click", function() {

$(this).hide();
var imgHide = $(this).attr("li")
$("img").hide();
$(imgHide).hide();

});
});
</script>

И мой последний вопрос:

В основном у меня есть файл с именем main.html. Когда пользователь щелкает что-либо в навигации, он загружает страницу с помощью команды загрузки jQuery в указанный элемент div id.

Скажем, я нажимаю "Панель инструментов". PHP загрузит dashboard.php, но мне нужно загрузить больше элементов в dashboard.php через AJAX.

Я попытался поместить код в main.html, чтобы он читал элементы div в dashboard.php и загружал другие файлы так же, как он загружал dashboard.php через загрузку jQuery, но это не работает. Мне нужно использовать следующий код в каждом другом файле, а затем main.html для загрузки материала через AJAX:

    <script type="text/javascript">

$(function() {
    var href = "notice.php";
    $("#dashboard_notice_utm").load(href);
});

</script>

Таким образом, этот код должен быть в dashboard.php для загрузки файла note.php. Будет ли более простой способ сделать это, и при этом не нужно будет что-то включать в страницы, а вместо этого использовать один файл JS? То же самое относится и к моему первому вопросу, так как для закрытия изображений требуется код, который должен быть в note.php.

• Заранее спасибо и извините за такой длинный вопрос.

Answer 1

В ответ на первый вопрос

$('.imglistbutton').live('click', function() {
  $(this).closest('li').hide();
});

Найдет ближайшую ссылку li на изображение, на которое нажали

И на второй вопрос

Я бы либоон находится на главной странице - то есть, если это позволяет ваша структура, или, в качестве альтернативы, у вас есть один файл js, который вы включаете на каждой странице, используя тег script в заголовке.

Answer 2

Для вопроса об изображении в вашем теге <a> нет атрибута "li", поэтому я предполагаю, что вы просто хотите скрыть весь контейнер <li>.В этом случае

$(".imglistbutton").live("click", function() {

$(this).hide();
var imgHide = $(this).parents("li");
$("img").hide();
imgHide.hide();

});

должно работать

В остальном я предлагаю вам создать новый вопрос по SO, поскольку у вас будет больше шансов получить ответ, если это отдельный вопрос.

Answer 3

Я бы, вероятно, использовал ближайший родительский элемент (.closest ()), который был представлен в 1.3, поскольку это немного конкретнее ...

$(document).ready(function(){    
    $(".imglistbutton").live("click", function(){
        var imgHide = $(this).closest("li"); // closest parent li only
        imgHide.hide(); // hides all children (this, div, a, img, etc.)
    });
});

Answer 4

Для первого вопроса вы не хотите использовать .attr("li"), потому что li - это не атрибут, а предок. вместо этого вы должны использовать .closest:

$(".imglistbutton").live("click", function() {

$(this).closest("li").hide();

});
});

Для 2-го вопроса вы можете использовать полный параметр load, чтобы выполнить jquery после завершения операции загрузки. Как то так:

$('#result').load('dashboard.php', function() {
    var href = "notice.php";
    $("#dashboard_notice_utm").load(href);
});

Таким образом, после загрузки dashboard.php будет сделан вызов для загрузки note.php в # dashboar_notice_utm.