Как убрать предварительно привязанные элементы родного брата - PullRequest
Новая
       23

Как убрать предварительно привязанные элементы родного брата

0 голосов
/ 03 мая 2019

Позвольте мне сначала заявить, что у меня нет проблем с циклом foreach, отправляющим данные с помощью json или моей функции ajax.

Проблема, с которой я сталкиваюсь, заключается в том, чтобы все населенные пункты .projectCont отображались правильно.

Фон: Пользователь нажимает на один из элементов списка, чтобы отобразить изображения для выбранной категории. Я выполняю запрос, чтобы вытащить все изображения из этой категории. Затем, очевидно, я хочу, чтобы все изображения появлялись на экране.

Проблема: Есть два сценария, с которыми я сейчас сталкиваюсь.

1.

ПЛОХОЙ - Если я изменю следующее в каждой функции ($('#projectsWrap').prepend(this.html);) на ($('#projectsWrap').html(this.html);) - тогда будет показано только одно из изображений (однако мои операторы журнала консоли все еще выводят все запрашиваемые элементы ... более одного.

ХОРОШО - Всякий раз, когда я нажимаю на новый элемент списка, существующие элементы списка исчезают, и появляется новый элемент списка, по которому щелкнули.

2.

ПЛОХОЙ - Это в основном полная противоположность приведенной выше. Если код находится в его текущем состоянии (с использованием prepend), если я нажимаю на новый элемент списка категорий, существующие запрашиваемые изображения не удаляются. Я попытался добавить следующий код, чтобы позаботиться об этом, но кажется, что он удаляет только одно изображение. $('#projectsWrap').find('.projectCont').prev().siblings().remove();

ХОРОШО - все запрошенные изображения показывают.

Кто-нибудь знает, как я могу изменить свой JS, чтобы отображать все запрашиваемые изображения для каждой категории, а затем удалять существующие изображения категорий, когда выбран другой элемент списка, и отображать только эти изображения категорий?

HTML 

<ul>
    <li class="categoryList" data-category="Linear Motion">Linear Motion</li>
    <li class="categoryList" data-category="Structures">Structures</li>
    <li class="categoryList" data-category="Guarding">Guarding</li>
    <li class="categoryList" data-category="Enclosures">Enclosures</li>
    <li class="categoryList" data-category="Material Handling">Material Handling</li>
    <li class="categoryList" data-category="Workstations">Workstations</li>
    </ul>
    <div id="projectsWrap"></div>

JS 

var displayProjects = JSON.parse(data);
$(displayProjects).each(function() {
    $('#projectsWrap').find('.projectCont').prev().siblings().remove();
    $('#projectsWrap').prepend(this.html);
    console.log(this.html);
* *} Тысяча сорок-девять);

PHP 

if ($projects_stmt = $con->prepare($projects_sql)) {
        $projects_stmt->execute();
        $project_rows = $projects_stmt->fetchAll(PDO::FETCH_ASSOC);
        $proj_arr = array();
        foreach ($project_rows as $project_row) {
            $project_img = $project_row['p_img'];
            $project_alt = $project_row['p_alt'];
            $project_display_img = '<img src="'.$project_img.'" alt="'. $project_alt .'">';
            $project_title = $project_row['p_name'];
            $html = '';
            $html .= '<div class="projectCont">';
            $html .= $project_display_img;
            $html .= '<div class="projectInfo">';
            $html .= '<span class="projectTitle">' . $project_title . '</span>';
            $html .= '</div>';
            $html .= '</div>';
            $data = array('id' => $project_row['id'], 'date' => $project_row['date_added'], 'html' => $html);
            $proj_arr[] = $data;
        }
    }
    echo json_encode($proj_arr);

1 Ответ

1 голос
/ 03 мая 2019

Вы можете очистить projectWraps div перед циклом: 

var displayProjects = JSON.parse(data),
  $wrapper = $('#projectsWrap'); // I would put this in a var for better performance if using it multiple times

$wrapper.empty(); // empty the wrapper

$(displayProjects).each(function() {
  $wrapper.prepend(this.html);
  console.log(this.html);
});

Дополнительная информация о empty ()

...