как спрятать текст в яваскрипт

Discussion in 'PHP' started by leonsp, 22 Dec 2015.

  1. leonsp

    leonsp New Member

    Joined:
    27 Oct 2010
    Messages:
    5
    Likes Received:
    1
    Reputations:
    0
    Здравствуйте! в коде картинка, нажал она поменялась, а вот с текстом не выходит.... вернее когда отдельно делаю все норма... но сейчас туплю. может кто подсказать что я не так делаю.
    PHP:
    <script type="text/javascript">
    function chg(id,chk)
    {
    var el = document.getElementById(id);
    var ch = document.getElementById(chk);
            if (el.src.indexOf("1.png")>0)
    {
                el.src="3.png"
                ch.checked="true"
            name="1";
            }else{
                el.src="1.png"
                ch.checked=""
            name="2";
            }
        }
        </script>
        <img src="1.png" id="img_1" onClick="chg(this.id,'check')"><br>
        <input type="checkbox" name="check" id="check">
    <a href="javascript:void(0);" onclick="chg('mydiv');">Показать блок</a>
    <div id="mydiv" style="display:none;">text text text</div>
    <?php
    echo $el.name;
    echo 
    "234234";
    ?>
    спасибо!
     
  2. Skofield

    Skofield Elder - Старейшина

    Joined:
    27 Aug 2008
    Messages:
    946
    Likes Received:
    308
    Reputations:
    51
    Если правильно понял, то достаточно просто изменить свойство display:
    HTML:
    <img src="1.png" id="img_1"><br>
    <input type="checkbox" name="check" id="check">
    <a href="javascript:void(0);" id="show">Показать блок</a>
    <a href="javascript:void(0);" id="hide">Спрятать блок</a>
    <div id="mydiv" style="display: none;">text text text</div>
       
    <script>
        var img = document.getElementById('img_1'),
            checkBox = document.getElementById('check'),
            showBlock = document.getElementById('show'),
            hideBlock = document.getElementById('hide'),
            div = document.getElementById('mydiv'),
            name = '';
    
        img.onclick = function() {
          if (img.src.indexOf("1.png") > 0) {
              img.src = "3.png";
              checkBox.checked = true;
              name = "1";
          } else {
              img.src = "1.png";
              checkBox.checked = false;
              name = "2";
          }
        }
        showBlock.onclick = function() {
            div.style.display = 'block';
        }
        hideBlock.onclick = function() {
            div.style.display = 'none';
        }
    </script>
     
    #2 Skofield, 3 Jan 2016
    Last edited: 3 Jan 2016
    GoodGoogle likes this.
  3. leonsp

    leonsp New Member

    Joined:
    27 Oct 2010
    Messages:
    5
    Likes Received:
    1
    Reputations:
    0
    спасибо! да почти так, только на картинку нажимая текст или появляется или пропадает в месте с картинкой.
    HTML:
    <head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    .old{
    cursor: pointer;
    text-align: center;
    background-image: url(x.png);
    }
    .new.old{
    background-image: url(xb.png);
    }
    </style>
    </head>
    <body>
    <table width="400" summary="">
    <thead>
    <tr>
    <th>Title 1</th>
    <th>Title 2</th>
    <th>Title 3</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td class="old" id="1" value="1">1</td>
    <td class="old" id="2" value="2">2</td>
    <td class="old" id="3" value="3">3</td>
    </tr>
    <tr>
    <td class="old"  id="4" value="4">4</td>
    <td class="old" id="5" value="5">5</td>
    <td class="old" id="6" value="6">6</td>
    </tr>
    <tr>
    <td id="4">----------</td>
    <td id="5">------------</td>
    <td id="6">---------</td>
    </tr>
    </tbody>
    </table>
    <script>
    window.addEventListener('DOMContentLoaded', function()
    {
    [].forEach.call(document.querySelectorAll('.old'), function(item)
    {
    item.addEventListener('click', function()
    {
    item.classList.toggle('new')
    });
    });
    });
    </script>
    </body>
    
     
  4. Skofield

    Skofield Elder - Старейшина

    Joined:
    27 Aug 2008
    Messages:
    946
    Likes Received:
    308
    Reputations:
    51
    Так просто обрабатываем нужный элемент(ты) с текстом в событии клика лкм на картинку. В чём конкретно сложность?
     
    #4 Skofield, 4 Jan 2016
    Last edited: 4 Jan 2016
  5. leonsp

    leonsp New Member

    Joined:
    27 Oct 2010
    Messages:
    5
    Likes Received:
    1
    Reputations:
    0
    сложность что я не силен в яваскрипт
     
  6. Skofield

    Skofield Elder - Старейшина

    Joined:
    27 Aug 2008
    Messages:
    946
    Likes Received:
    308
    Reputations:
    51
    В таком случае, чтобы получить адекватный ответ, нужно составить правильное ТЗ с описанием того что имеем и что должны получить. А то просто бросаться кодом, который вдобавок ещё не выдерживает установленный стиль данного языка - не есть хорошо.
     
  7. leonsp

    leonsp New Member

    Joined:
    27 Oct 2010
    Messages:
    5
    Likes Received:
    1
    Reputations:
    0
    код который ты дал немного переделал и теперь и текст с картинкой убирается.
    HTML:
    <script>
        var img = document.getElementById('img_1'),
            checkBox = document.getElementById('check'),
            showBlock = document.getElementById('show'),
            hideBlock = document.getElementById('hide'),
            div = document.getElementById('mydiv'),
            name = '';
    
        img.onclick = function() {
          if (img.src.indexOf("1.png") > 0) {
              img.src = "3.png";
              checkBox.checked = true;
    div.style.display = 'block';
              name = "1";
          } else {
              img.src = "1.png";
              checkBox.checked = false;
    div.style.display = 'none';
              name = "2";
          }
        } 
    </script>
    а с old т.е. это не ява скрипт? в общем установил фотошоп, прочитал урок для чайников по яваскрипт калькулятор,зарегил домен и вот что задумал http://sincorrer.xyz/game.php
    в примере который ты дал, да намного легче разобраться, да нет и если.... а тот скрипт по выше сложнее, я на него смотрю как на выключенный монитор
     
    altblitz likes this.
  8. altblitz

    altblitz Elder - Старейшина

    Joined:
    5 Jun 2009
    Messages:
    3,379
    Likes Received:
    2,781
    Reputations:
    231
    Но картинки - будут загружаться и текст уже набран.
    Не вижу ни малейшего баръера для просмотра сурса js и css - следовательно, ни в открытии картинки, ни в чтении текста - который уже загружен в браузер (в cache страницы).

    Единственно правильный подход к решению задачи, с js - ajax и загрузка on demand - картинок и текста.
    Техничное решение без костылей hide/show того контента, что уже есть и загружено в браузере.
     
  9. leonsp

    leonsp New Member

    Joined:
    27 Oct 2010
    Messages:
    5
    Likes Received:
    1
    Reputations:
    0
    как предложил Skofield Elder , это придется для каждой картинки прописывать? т.е.
    HTML:
    <script>
        var img = document.getElementById('img_1'),
            checkBox = document.getElementById('check'),
            showBlock = document.getElementById('show'),
            hideBlock = document.getElementById('hide'),
            div = document.getElementById('mydiv'),
            name = '';
    var img = document.getElementById('img_2'),
            checkBox2 = document.getElementById('check'),
            showBlock2 = document.getElementById('show'),
            hideBlock2 = document.getElementById('hide'),
            div2 = document.getElementById('mydiv'),
            name2 = '';
    


     
Loading...