Вопросы Теги

Как вызвать код JS несколько раз в разделе HTML?

[h0] C ++ 11 draft standard объясняет это в примечании в разделе 4.4, в котором говорится:

[Примечание: если программа может назначить указатель типа T ** на указатель типа const T ** (то есть, если строка 1 ниже была разрешена), программа может непреднамеренно модифицировать объект const (как это делается в строке # 2). Например, 

int main() {
const char c = 'c';
char* pc;
const char** pcc = &pc; // #1: not allowed
*pcc = &c;
*pc = 'C'; // #2: modifies a const object
}

-end note]

blockquote>

Интересным связанным вопросом является . Если int ** p1 и const int ** p2 есть p1 = = p2 хорошо сформирован? .

Обратите внимание, что в C ++ FAQ также есть объяснение, но мне больше нравится пояснение из стандарта.

Соответствующий текст, который идет с примечанием, выглядит следующим образом:

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

Два типа указателей T1 и T2 аналогичны, если существует тип T и целое число n> 0, что:

T1 является cv1,0 указателем на cv1, 1 указатель на ··· cv1, n-1 указатель на cv1, n T

blockquote>

и

T2 - cv2,0 указатель на указатель cv2,1 to ··· cv2, n-1 указатель на cv2, n T

blockquote>

, где каждый cvi, j является const, volatile, const volatile или ничего. N-кортеж cv-квалификаторов после первого в типе указателя, например cv1,1, cv1,2, ..., cv1, n в типе указателя T1, называется cv-квалификационной сигнатурой типа указателя , Выражение типа T1 может быть преобразовано в тип T2 тогда и только тогда, когда выполняются следующие условия:

  • типы указателей аналогичны.
  • для каждого j> 0, если const находится в cv1, j, то const находится в cv2, j и аналогично для volatile.
  • , если cv1, j и cv2, j различны, то const находится в каждом cv2, k для 0 & lt; ; k & lt; j.
blockquote> blockquote>

1
задан Bruno DaSilva 5 March 2019 в 18:52
поделиться

2 ответа

Думаю, проблема в том, что когда вы добавляете свой обработчик событий в .imgs

.imgs выбирается с помощью querySelector, а не querySelectorAll, что означает, что он получает только первый.

Вам, вероятно, просто нужно изменить селектор для imgs на querySelectorAll, а затем выполнить итерацию по каждому из них, чтобы подключить прослушиватель событий 

//JS CODE 

    const current = document.querySelector("#current");
    //const imgs = document.querySelector(".imgs");
    const imgs = document.querySelectorAll(".imgs");
    const img = document.querySelectorAll(".imgs img");
    const opacity = 0.7;

    // Set first img opacity
    img[0].style.opacity = opacity;

    //imgs.addEventListener("click", imgClick);
    imgs.forEach( function(i) {
        i.addEventListener("click", imgClick);
    });
    

    function imgClick(e) {
      // Reset the opacity
      img.forEach(img => (img.style.opacity = 1));

      // Change current image to src of clicked image
      current.src = e.target.src;

      // Add fade in class
      current.classList.add("fade-in");

      // Remove fade-in class after .5 seconds
      setTimeout(() => current.classList.remove("fade-in"), 500);

      // Change the opacity to opacity var
      e.target.style.opacity = opacity;
    }
<section id="portfolioProjects" class="section section-a">
          <div class="container">
            <div class="row animate-box">
              <div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
                <h2 style="color: #585555db">
                  Portfolio
                </h2>
                <p class="psub-title-One">
                  some text
                </p>
              </div>
            </div>

            <ul class="nav nav-tabs animate-box">
              <li class="active">
                <a data-toggle="tab" href="#home">Simple WebSite</a>
              </li>
              <li><a data-toggle="tab" href="#menu1">Design</a></li>
              <li><a data-toggle="tab" href="#menu2">Code Snippets</a></li>
            </ul>

            <div class="tab-content">
              <div id="home" class="tab-pane fade in active">
                <br />
                <div class="animate-box">
                  <h2>Fully Functional Responsive Website</h2>
                  <p class="about-text">
                    some text
                  </p>
                </div>

                <iframe
                  src="https://codepen.io/dasilvabrunotexas/"
                  scrolling="auto"
                  height="900"
                  width="100%"
                  class="animate-box"
                ></iframe>

                <!-- Hide Image Gallery on Big Screens-->
               <!-- Hide Image Gallery on Big Screens-->
                <div class="container-gallery animate-box ">
                  <div class="main-img">
                    <img src="https://www.placecage.com/200/300" alt="Image1" id="current" />
                  </div>

                  <div class="imgs">
                    <div class="img-One animate-box " data-animate-effect="fadeIn">
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div class="img-two animate-box " data-animate-effect="fadeIn">
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div
                      class="img-three animate-box "
                      data-animate-effect="fadeIn"
                    >
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div class="img-four animate-box " data-animate-effect="fadeIn">
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div class="img-five animate-box " data-animate-effect="fadeIn">
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div class="img-six animate-box " data-animate-effect="fadeIn">
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div
                      class="img-seven animate-box "
                      data-animate-effect="fadeIn"
                    >
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div
                      class="img-eigth animate-box "
                      data-animate-effect="fadeIn"
                    >
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                  </div>
                </div>
                

                <!-- END Hide Image Gallery on Big Screens-->
              </div>
              <!-- END First Portfolio Menu-->

              <div id="menu1" class="tab-pane fade">
                <br />
                <h2>Graphic & Web Design Projects</h2>
                <p class="about-text">
                  some text
                </p>

               
                <!-- Hide Image Gallery on Big Screens-->
              <!-- Hide Image Gallery on Big Screens-->
                <div class="container-gallery animate-box ">
                  <div class="main-img">
                    <img src="https://www.placecage.com/200/300" alt="Image1" id="current" />
                  </div>

                  <div class="imgs">
                    <div class="img-One animate-box " data-animate-effect="fadeIn">
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div class="img-two animate-box " data-animate-effect="fadeIn">
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div
                      class="img-three animate-box "
                      data-animate-effect="fadeIn"
                    >
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div class="img-four animate-box " data-animate-effect="fadeIn">
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div class="img-five animate-box " data-animate-effect="fadeIn">
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div class="img-six animate-box " data-animate-effect="fadeIn">
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div
                      class="img-seven animate-box "
                      data-animate-effect="fadeIn"
                    >
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div
                      class="img-eigth animate-box "
                      data-animate-effect="fadeIn"
                    >
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                  </div>
                </div>

                <!-- END Hide Image Gallery on Big Screens-->
              </div>
             
              
              <!-- END First Menu-->

              <div id="menu2" class="tab-pane fade">
                <br />
                <div class="animate-box">
                  <h2>Tic-Tac-Toe Game</h2>
                  <p class="about-text">
                    SOME TEXT
                    <a target="_blank" href="#"
                      ><i style="color:#ffcc5c" class="fab fa-fly"></i>
                    </a>
                    to see more Projects on CodePen.
                  </p>
                </div>

                <iframe
                  src="#"
                  height="900"
                  width="95%"
                  class="animate-box"
                ></iframe>
                
                <!-- Hide Image Gallery on Big Screens-->
                <div class="container-gallery animate-box ">
                  <div class="main-img">
                    <img src="https://www.placecage.com/200/300" alt="Image1" id="current" />
                  </div>

                  <div class="imgs">
                    <div class="img-One animate-box " data-animate-effect="fadeIn">
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div class="img-two animate-box " data-animate-effect="fadeIn">
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div
                      class="img-three animate-box "
                      data-animate-effect="fadeIn"
                    >
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div class="img-four animate-box " data-animate-effect="fadeIn">
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div class="img-five animate-box " data-animate-effect="fadeIn">
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div class="img-six animate-box " data-animate-effect="fadeIn">
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div
                      class="img-seven animate-box "
                      data-animate-effect="fadeIn"
                    >
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                    <div
                      class="img-eigth animate-box "
                      data-animate-effect="fadeIn"
                    >
                      <img src="https://www.placecage.com/200/300" />
                    </div>
                  </div>
                </div>
                

                <!-- END Hide Image Gallery on Big Screens-->
              </div>
            </div>
          </div>
          <script src="../dist/js/image-gallery.js"></script>
        </section>
        <br />

0
ответ дан nixkuroi 5 March 2019 в 18:52
поделиться

Атрибут id должен быть уникальным на странице. Когда вы выбираете элемент с помощью селектора идентификаторов, он получает только первый элемент в дереве DOM.

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

//JS CODE 
const imageContainers = document.querySelectorAll(".imgs");
const opacity = 0.7;

// Set the opacity for first image in each container
imageContainers.forEach((imageContainer) => { 
  imageContainer.querySelectorAll('.imgs img')[0].style.opacity = opacity;
});

// attach the click event for all the images inside the containers 
imageContainers.forEach((imageContainer) => imageContainer.addEventListener("click", imgClick));

function imgClick(e) {
  let currentContainer = e.currentTarget;
  let currentContainerImages = currentContainer.querySelectorAll('img');
  let currentImage = currentContainer.parentNode.querySelector('.current');
  
  // update opacity for each image in container 
  currentContainerImages.forEach(img => (img.style.opacity = 1));

  // Change current image to src of clicked image
  currentImage.src = e.target.src;

  // Add fade in class
  currentImage.classList.add("fade-in");

  // Remove fade-in class after .5 seconds
  setTimeout(() => currentImage.classList.remove("fade-in"), 500);

  // Change the opacity to opacity var
  e.target.style.opacity = opacity;
}
<section id="portfolioProjects" class="section section-a">
  <div class="container">
    <div class="row animate-box">
      <div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
        <h2 style="color: #585555db">
          Portfolio
        </h2>
        <p class="psub-title-One">
          some text
        </p>
      </div>
    </div>

    <ul class="nav nav-tabs animate-box">
      <li class="active">
        <a data-toggle="tab" href="#home">Simple WebSite</a>
      </li>
      <li><a data-toggle="tab" href="#menu1">Design</a></li>
      <li><a data-toggle="tab" href="#menu2">Code Snippets</a></li>
    </ul>

    <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
        <br />
        <div class="animate-box">
          <h2>Fully Functional Responsive Website</h2>
          <p class="about-text">
            some text
          </p>
        </div>

        <iframe src="https://codepen.io/dasilvabrunotexas/" scrolling="auto" height="900" width="100%" class="animate-box"></iframe>

        <!-- Hide Image Gallery on Big Screens-->
        <!-- Hide Image Gallery on Big Screens-->
        <div class="container-gallery animate-box ">
          <div class="main-img">
            <img src="https://www.placecage.com/200/300" alt="Image1" class="current" />
          </div>

          <div class="imgs">
            <div class="img-One animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-two animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-three animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-four animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-five animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-six animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-seven animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-eigth animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
          </div>
        </div>


        <!-- END Hide Image Gallery on Big Screens-->
      </div>
      <!-- END First Portfolio Menu-->

      <div id="menu1" class="tab-pane fade">
        <br />
        <h2>Graphic & Web Design Projects</h2>
        <p class="about-text">
          some text
        </p>


        <!-- Hide Image Gallery on Big Screens-->
        <!-- Hide Image Gallery on Big Screens-->
        <div class="container-gallery animate-box ">
          <div class="main-img">
            <img src="https://www.placecage.com/200/300" alt="Image1" class="current" />
          </div>

          <div class="imgs">
            <div class="img-One animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-two animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-three animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-four animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-five animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-six animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-seven animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-eigth animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
          </div>
        </div>

        <!-- END Hide Image Gallery on Big Screens-->
      </div>


      <!-- END First Menu-->

      <div id="menu2" class="tab-pane fade">
        <br />
        <div class="animate-box">
          <h2>Tic-Tac-Toe Game</h2>
          <p class="about-text">
            SOME TEXT
            <a target="_blank" href="#"><i style="color:#ffcc5c" class="fab fa-fly"></i>
                    </a> to see more Projects on CodePen.
          </p>
        </div>

        <iframe src="#" height="900" width="95%" class="animate-box"></iframe>

        <!-- Hide Image Gallery on Big Screens-->
        <div class="container-gallery animate-box ">
          <div class="main-img">
            <img src="https://www.placecage.com/200/300" alt="Image1" class="current" />
          </div>

          <div class="imgs">
            <div class="img-One animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-two animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-three animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-four animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-five animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-six animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-seven animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
            <div class="img-eigth animate-box " data-animate-effect="fadeIn">
              <img src="https://www.placecage.com/200/300" />
            </div>
          </div>
        </div>


        <!-- END Hide Image Gallery on Big Screens-->
      </div>
    </div>
  </div>
  <script src="../dist/js/image-gallery.js"></script>
</section>
<br />

0
ответ дан Sushanth -- 5 March 2019 в 18:52
поделиться
Другие вопросы по тегам:

Похожие вопросы: