Показать все скрытые элементы, когда страница загружается с переопределением? - PullRequest
0 голосов
/ 04 февраля 2019

У меня есть страница, которая заставляет некоторые JS загружаться на страницу, которую мне нужно переопределить.Я могу загрузить отдельный файл JS, чтобы сделать это.Я хочу, чтобы страница набрала .show для любого из .below-the-fold с на странице.Я думаю, что лучший способ сказать это - я хочу, чтобы все «больше» вещей на странице расширялось при загрузке страницы, а не заставляло человека нажимать more, чтобы увидеть, что находится ниже сгиба на всем этом.Это тот JS, который мне нужно переопределить, я не могу его изменить, так как он загружается приложением автоматически.Может быть скрыто несколько списков, но я не уверен, насколько сложнее все это сделать.

function MoreFacets($more_facets_div) {
    this.$more_facets_div = $more_facets_div;

    this.bind_events();
};

MoreFacets.prototype.bind_events = function() {
    var self = this;

    self.$more_facets_div.find('.more').on('click', function (e) {
        $(this).siblings('.below-the-fold').show();
        $(this).hide();
    });

    self.$more_facets_div.find('.less').on('click', function (e) {
        $(this).parent().hide();
        $(this).parent().parent().find('.more').show();
    });

};

$(function() {
    $('.more-facets').each(function() {
        new MoreFacets($(this));
    });
});

Он загружен на страницу, и HTML-код выглядит так:

<h3>Additional filters: </h3>
<dl id="facets">
    <dt>Collecting Area</dt>
      <dd> Here's Something in the list</dd>
      <dd> Here's the last in the list</dd>
        <div class="more-facets">
          <span class="more btn">&or; more</span>
          <div class="below-the-fold">
      <dd>Something That's hidden is here</dd>
      <dd>Something more in this hidden list</dd>

То есть, когда нажата &or; more, появляются другие, находящиеся ниже сгиба, и это то, что я хочу загрузить при загрузке страницы.Обычно на странице есть несколько таких списков.

Так что я думаю, что мне нужно сделать что-то вроде запуска ('.below-the-fold').show() для всех списков при загрузке страницы?

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

Еще одно примечание, основанное на другом вопросе ниже ... Он загружен в отдельный файл, и я могу загрузить свой файл до этого.Я знаю, что могу переопределить другие JS на странице, поэтому я предполагаю, что я могу переопределить и это.

1 Ответ

0 голосов
/ 04 февраля 2019

Исходя из вашего последнего редактирования, кажется, что вы уже нашли самое быстрое решение вашей проблемы.

Обратите внимание, это будет работать только в том случае, если скрипт не загружается асинхронно, но если у вас есть контрольв порядке загрузки сценариев вы можете вставить свой сценарий между сценарием проблемы и jQuery.

Ваш сценарий может быть таким же простым, как переопределение функции, которую он использует, примерно так:

MoreFacets.prototype.bind_events = function() {
    var self = this;

    //Autostart in our open state without completely disabling the functionality
    self.$more_facets_div.find('.below-the-fold').show();
    self.$more_facets_div.find('.more').hide();

    self.$more_facets_div.find('.more').on('click', function (e) {
        $(this).siblings('.below-the-fold').show();
        $(this).hide();
    });

    self.$more_facets_div.find('.less').on('click', function (e) {
        $(this).parent().hide();
        $(this).parent().parent().find('.more').show();
    });
};

Теперь, это не сработает, если у вас нет контроля над загрузкой скрипта, но у вас может быть надежда даже в этом случае, потому что функции готовности документов в jQuery вызываются в порядке их регистрации, поэтомуесли вы не можете по-настоящему контролировать, где находится ваш сценарий, вы можете поиграть с альтернативой

$(function() {
    $('.more-facets').each(function() {
        $(this).find('.below-the-fold').show();
        $(this).find('.more').hide();
    });
});

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

...