How do I upload content to a page based on a previously clicked element?

Question

How do I upload content to a page based on a previously clicked element?

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

I have a simple gallery where each image leads to a new page with its description. It turns out that the page layout for the descriptions is the same, just changing the content. How do I make only a few fields on this page change based on the items you previously clicked on the gallery page?

<html>
  <head>
    <title>Galeria</title>
    <link rel ="stylesheet" href= "css/galeria.css">
  </head>
  <body>
  <div class="gallery">
    <a target="_self" href="desc1.html">
      <img src="img/imagem1.jpg" alt="Imagem 1" width="200" height="200">
    </a>
    <div class="desc">Imagem 1</div>
  </div>
  <div class="gallery">
    <a target="_self" href="desc2.html">
      <img src="img/imagem2.jpg" alt="Imagem 2" width="200" height="200">
    </a>
    <div class="desc">Imagem 2</div>
  </div>
  <div class="gallery">
    <a target="_self" href="desc3.html">
      <img src="img/imagem3.jpg" alt="Imagem 3" width="200" height="200">
    </a>
    <div class="desc">Imagem 3</div>
  </div>
  <div class="gallery">
    <a target="_self" href="desc4.html">
      <img src="img/imagem4.jpg" alt="Imagem 4" width="200" height="200">
    </a>
    <div class="desc">Imagem 4</div>
   </div>
  </body>
 </html>

javascript html css

asked by anonymous 04.04.2017 / 14:18

2 answers

How to use gif on Android? What encryption is this? [duplicate]

score 2 · Answer 1

One option would be to pass a parameter in the URL, in the example I passed the item ID.

$(document).on('click', '.itemGaleria', function() {
    var itemGaleria = $(this).attr('id');
    if (itemGaleria ) {
        window.location = '/outra_pagina?item=' + itemGaleria;
    }
});

And in the "other_page" you can get the value of the parameter with the following function:

function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }
    name = name.replace(/[\[\]]/g, "\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

So:

var itemGaleria = getParameterByName('item'); // "id do item"

score 0 · Answer 2

As I already replied to this link .

There's no way I can put a single functional fiddle here because it involves more than one page, so I'll create two htmls + one js and you can simulate by making the following files in the same folder. See step-by-step:

First File - index.html

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><scriptsrc="selector.js"></script>
  <script>
    $(function() {
      initSectorUI();

      $("#navigator a").click(function() {
        showSectorMini($(this).attr('href'));
      });
    });
  </script>
  <style>
    .block {
      width: 100%;
      height: 33vh;
    }
    
    #first {
      background: red;
    }
    
    #second {
      background: blue;
    }
    
    #third {
      background: green;
    }
    
    #fourth {
      background: yellow;
    }
    
    #fifth {
      background: pink;
    }
  </style>
</head>

<body>
  <div id="navigator">
    <a href="page.html#first">First</a>
    <a href="page.html#second">Second</a>
    <a href="page.html#third">Third</a>
    <a href="page.html#fourth">Fourth</a>
    <a href="page.html#fifth">Fifth</a>
  </div>
</body>

</html>

Second File - page.html

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><scriptsrc="selector.js"></script>
  <script>
    $(function() {
      initSectorUI();

      $("#navigator a").click(function() {
        showSectorMini($(this).attr('href'));
      });
    });
  </script>
  <style>
    .block {
      width: 100%;
      height: 33vh;
    }
    
    #first {
      background: red;
    }
    
    #second {
      background: blue;
    }
    
    #third {
      background: green;
    }
    
    #fourth {
      background: yellow;
    }
    
    #fifth {
      background: pink;
    }
  </style>
</head>

<body>
  <div id="sectors">
    <div id="first" class="block" style="display: none;">A</div>
    <div id="second" class="block" style="display: none;">B</div>
    <div id="third" class="block" style="display: none;">C</div>
    <div id="fourth" class="block" style="display: none;">D</div>
    <div id="fifth" class="block" style="display: none;">E</div>
  </div>
  <br>
  <form><input Type="button" VALUE="Voltar" onClick="history.go(-1);return true;"></form>
</body>

</html>

Third File - selector.js

var initSectorUI = function() {
  if (location.hash) showSectorMini(location.hash);
};

var showSectorMini = function(sector) {
  $('#sectors > div').hide();
  $(sector).show();
};

Put the three files together in one folder and let me know if it worked. Here was good! :)