Question

Я хотел бы создать динамическую функцию jQuery при наведении курсора мыши / mouseleave. В настоящее время функция охватывает только первый элемент, как показано в прикрепленном фрагменте. Но я также хочу заставить другие элементы работать без необходимости устанавливать одну функцию jQuery для объекта.

DOM структурированы таким образом, что для каждого элемента создаются 1x оболочка, 1x DOM с подсказкой и 1x круговой DOMв возвращении JSON.

Есть ли правильный способ достичь этого?

Заранее спасибо за помощь.

$(document).ready(function() {
  $(document).on("mouseover", "#id10", function() {
    $("#tooltip10").show();
  });
  $(document).on("mouseleave", "#id10", function() {
    $("#tooltip10").hide();
  });
});

#mainContent .thirdRow .column {
  display: inline-block;
  position: relative;
}

#mainContent .LatestResults {
  color: #919191;
  font-weight: bold;
  padding-right: 5px;
  padding-top: 8px;
  padding-left: 10px;
  font-size: 15px;
  text-align: center;
  vertical-align: middle;
}

#mainContent .resultData .tooltip {
  height: 100px;
  width: 100px;
  top: 20px;
  left: 50%;
  transform: translateX(-45%);
  position: absolute;
  text-align: center;
  vertical-align: middle;
  float: left;
  background-color: #ADADAD;
  color: #FFF;
  border-radius: 10px;
  padding-top: 10px;
  z-index: 5;
}

#mainContent .resultData {
  padding-right: 6px;
  padding-left: 3px;
  padding-top: 6px;
  vertical-align: middle;
  float: left;
  z-index: -1;
}

#mainContent .datapointred {
  display: inline-block;
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #FF5B5B;
  vertical-align: middle;
  -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
}

#mainContent .datapointgreen {
  display: inline-block;
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #00DC8E;
  vertical-align: middle;
  -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
}

#mainContent .datapointblue {
  display: inline-block;
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #4B49AE;
  vertical-align: middle;
  -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91);
  -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91);
  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91);
}

<body>

  <div id="mainContent">

    <div class="thirdRow">

      <div class="resultData column">


        <div class="resultWrapper10 column">
          <div class="datapointgreen datapoint" id="id10"></div>
          <table class="tooltip" style="" id="tooltip10">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>2</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>0</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper18 column">
          <div class="datapointgreen datapoint" id="id18"></div>
          <table class="tooltip" style="display:none" id="tooltip18">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>1</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>6</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper21 column">
          <div class="datapointblue datapoint" id="id21"></div>
          <table class="tooltip" style="display:none" id="tooltip21">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>1</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>1</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper37 column">
          <div class="datapointgreen datapoint" id="id37"></div>
          <table class="tooltip" style="display:none" id="tooltip37">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>1</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>2</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper45 column">
          <div class="datapointgreen datapoint" id="id45"></div>
          <table class="tooltip" style="display:none" id="tooltip45">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>0</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>3</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper1110 column">
          <div class="datapointred datapoint" id="id1110"></div>
          <table class="tooltip" style="display:none" id="tooltip1110">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>2</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>1</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper53 column">
          <div class="datapointgreen datapoint" id="id53"></div>
          <table class="tooltip" style="display:none" id="tooltip53">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>5</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>0</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper65 column">
          <div class="datapointgreen datapoint" id="id65"></div>
          <table class="tooltip" style="display:none" id="tooltip65">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>0</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>2</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper1115 column">
          <div class="datapointgreen datapoint" id="id1115"></div>
          <table class="tooltip" style="display:none" id="tooltip1115">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>2</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>1</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>


















<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

T.J. Crowder · Answer 1 · 16 октября 2019

Два решения для вас:

Все еще используете JavaScript

Используйте класс для всех элементов, которые вы хотите обработать обработчиками, а не ID. Идентификаторы по своей природе должны быть уникальными. Внутри обработчика используйте this, чтобы вы знали, на какой элемент нацелено событие, и по нему найдите подсказку:

$(document).ready(function() {
  $(document).on("mouseover", ".datapoint", function() {
    $(this).nextAll(".tooltip").show();
  });
  $(document).on("mouseleave", ".datapoint", function() {
    $(this).nextAll(".tooltip").hide();
  });
});

Live Пример:

$(document).ready(function() {
  $(document).on("mouseover", ".datapoint", function() {
    $(this).nextAll(".tooltip").show();
  });
  $(document).on("mouseleave", ".datapoint", function() {
    $(this).nextAll(".tooltip").hide();
  });
});

#mainContent .thirdRow .column {
  display: inline-block;
  position: relative;
}

#mainContent .LatestResults {
  color: #919191;
  font-weight: bold;
  padding-right: 5px;
  padding-top: 8px;
  padding-left: 10px;
  font-size: 15px;
  text-align: center;
  vertical-align: middle;
}

#mainContent .resultData .tooltip {
  height: 100px;
  width: 100px;
  top: 20px;
  left: 50%;
  transform: translateX(-45%);
  position: absolute;
  text-align: center;
  vertical-align: middle;
  float: left;
  background-color: #ADADAD;
  color: #FFF;
  border-radius: 10px;
  padding-top: 10px;
  z-index: 5;
}

#mainContent .resultData {
  padding-right: 6px;
  padding-left: 3px;
  padding-top: 6px;
  vertical-align: middle;
  float: left;
  z-index: -1;
}

#mainContent .datapointred {
  display: inline-block;
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #FF5B5B;
  vertical-align: middle;
  -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
}

#mainContent .datapointgreen {
  display: inline-block;
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #00DC8E;
  vertical-align: middle;
  -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
}

#mainContent .datapointblue {
  display: inline-block;
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #4B49AE;
  vertical-align: middle;
  -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91);
  -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91);
  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91);
}

<body>

  <div id="mainContent">

    <div class="thirdRow">

      <div class="resultData column">


        <div class="resultWrapper10 column">
          <div class="datapointgreen datapoint" id="id10"></div>
          <table class="tooltip" style="" id="tooltip10">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>2</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>0</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper18 column">
          <div class="datapointgreen datapoint" id="id18"></div>
          <table class="tooltip" style="display:none" id="tooltip18">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>1</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>6</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper21 column">
          <div class="datapointblue datapoint" id="id21"></div>
          <table class="tooltip" style="display:none" id="tooltip21">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>1</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>1</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper37 column">
          <div class="datapointgreen datapoint" id="id37"></div>
          <table class="tooltip" style="display:none" id="tooltip37">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>1</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>2</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper45 column">
          <div class="datapointgreen datapoint" id="id45"></div>
          <table class="tooltip" style="display:none" id="tooltip45">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>0</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>3</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper1110 column">
          <div class="datapointred datapoint" id="id1110"></div>
          <table class="tooltip" style="display:none" id="tooltip1110">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>2</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>1</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper53 column">
          <div class="datapointgreen datapoint" id="id53"></div>
          <table class="tooltip" style="display:none" id="tooltip53">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>5</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>0</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper65 column">
          <div class="datapointgreen datapoint" id="id65"></div>
          <table class="tooltip" style="display:none" id="tooltip65">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>0</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>2</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper1115 column">
          <div class="datapointgreen datapoint" id="id1115"></div>
          <table class="tooltip" style="display:none" id="tooltip1115">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>2</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>1</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Использование CSS вместо

Вы можете использовать тот факт, что всплывающая подсказка является родственным элементом div, который вызывает еесделать это с помощью CSS:

.datapoint + .tooltip {
    display: none;
}
.datapoint:hover + .tooltip {
    display: block;
}

Live Пример:

#mainContent .thirdRow .column {
  display: inline-block;
  position: relative;
}

#mainContent .LatestResults {
  color: #919191;
  font-weight: bold;
  padding-right: 5px;
  padding-top: 8px;
  padding-left: 10px;
  font-size: 15px;
  text-align: center;
  vertical-align: middle;
}

#mainContent .resultData .tooltip {
  height: 100px;
  width: 100px;
  top: 20px;
  left: 50%;
  transform: translateX(-45%);
  position: absolute;
  text-align: center;
  vertical-align: middle;
  float: left;
  background-color: #ADADAD;
  color: #FFF;
  border-radius: 10px;
  padding-top: 10px;
  z-index: 5;
}

#mainContent .resultData {
  padding-right: 6px;
  padding-left: 3px;
  padding-top: 6px;
  vertical-align: middle;
  float: left;
  z-index: -1;
}

#mainContent .datapointred {
  display: inline-block;
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #FF5B5B;
  vertical-align: middle;
  -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
}

#mainContent .datapointgreen {
  display: inline-block;
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #00DC8E;
  vertical-align: middle;
  -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
}

#mainContent .datapointblue {
  display: inline-block;
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #4B49AE;
  vertical-align: middle;
  -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91);
  -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91);
  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91);
}

.datapoint + .tooltip {
    display: none;
}
.datapoint:hover + .tooltip {
    display: block;
}

<body>

  <div id="mainContent">

    <div class="thirdRow">

      <div class="resultData column">


        <div class="resultWrapper10 column">
          <div class="datapointgreen datapoint" id="id10"></div>
          <table class="tooltip" style="" id="tooltip10">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>2</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>0</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper18 column">
          <div class="datapointgreen datapoint" id="id18"></div>
          <table class="tooltip" id="tooltip18">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>1</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>6</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper21 column">
          <div class="datapointblue datapoint" id="id21"></div>
          <table class="tooltip" id="tooltip21">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>1</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>1</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper37 column">
          <div class="datapointgreen datapoint" id="id37"></div>
          <table class="tooltip" id="tooltip37">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>1</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>2</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper45 column">
          <div class="datapointgreen datapoint" id="id45"></div>
          <table class="tooltip" id="tooltip45">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>0</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>3</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper1110 column">
          <div class="datapointred datapoint" id="id1110"></div>
          <table class="tooltip" id="tooltip1110">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>2</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>1</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper53 column">
          <div class="datapointgreen datapoint" id="id53"></div>
          <table class="tooltip" id="tooltip53">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>5</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>0</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper65 column">
          <div class="datapointgreen datapoint" id="id65"></div>
          <table class="tooltip" id="tooltip65">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>0</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>2</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper1115 column">
          <div class="datapointgreen datapoint" id="id1115"></div>
          <table class="tooltip" id="tooltip1115">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>2</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>1</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Обязательно удалите строчные style="display:none" на подсказках, как указано выше.

Carsten Løvbo Andersen · Answer 2 · 16 октября 2019

Вы можете использовать этот селектор [id^=id], id^=id означает каждый идентификатор, который начинается с идентификатора

$(document).ready(function() {
  $(document).on("mouseover", "[id^=id]", function() {
    $(this).next("table").show();
  });
  $(document).on("mouseleave", "[id^=id]", function() {
    $(".tooltip").hide();
  });
});

Демо

$(document).ready(function() {
  $(document).on("mouseover", "[id^=id]", function() {
    $(this).next("table").show();
  });
  $(document).on("mouseleave", "[id^=id]", function() {
    $(".tooltip").hide();
  });
});

#mainContent .thirdRow .column {
  display: inline-block;
  position: relative;
}

#mainContent .LatestResults {
  color: #919191;
  font-weight: bold;
  padding-right: 5px;
  padding-top: 8px;
  padding-left: 10px;
  font-size: 15px;
  text-align: center;
  vertical-align: middle;
}

#mainContent .resultData .tooltip {
  height: 100px;
  width: 100px;
  top: 20px;
  left: 50%;
  transform: translateX(-45%);
  position: absolute;
  text-align: center;
  vertical-align: middle;
  float: left;
  background-color: #ADADAD;
  color: #FFF;
  border-radius: 10px;
  padding-top: 10px;
  z-index: 5;
}

#mainContent .resultData {
  padding-right: 6px;
  padding-left: 3px;
  padding-top: 6px;
  vertical-align: middle;
  float: left;
  z-index: -1;
}

#mainContent .datapointred {
  display: inline-block;
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #FF5B5B;
  vertical-align: middle;
  -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
}

#mainContent .datapointgreen {
  display: inline-block;
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #00DC8E;
  vertical-align: middle;
  -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
}

#mainContent .datapointblue {
  display: inline-block;
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #4B49AE;
  vertical-align: middle;
  -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91);
  -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91);
  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91);
}

<body>

  <div id="mainContent">

    <div class="thirdRow">

      <div class="resultData column">


        <div class="resultWrapper10 column">
          <div class="datapointgreen datapoint" id="id10"></div>
          <table class="tooltip" style="" id="tooltip10">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>2</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>0</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper18 column">
          <div class="datapointgreen datapoint" id="id18"></div>
          <table class="tooltip" style="display:none" id="tooltip18">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>1</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>6</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper21 column">
          <div class="datapointblue datapoint" id="id21"></div>
          <table class="tooltip" style="display:none" id="tooltip21">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>1</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>1</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper37 column">
          <div class="datapointgreen datapoint" id="id37"></div>
          <table class="tooltip" style="display:none" id="tooltip37">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>1</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>2</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper45 column">
          <div class="datapointgreen datapoint" id="id45"></div>
          <table class="tooltip" style="display:none" id="tooltip45">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>0</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>3</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper1110 column">
          <div class="datapointred datapoint" id="id1110"></div>
          <table class="tooltip" style="display:none" id="tooltip1110">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>2</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>1</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper53 column">
          <div class="datapointgreen datapoint" id="id53"></div>
          <table class="tooltip" style="display:none" id="tooltip53">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>5</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>0</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper65 column">
          <div class="datapointgreen datapoint" id="id65"></div>
          <table class="tooltip" style="display:none" id="tooltip65">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>0</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>2</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper1115 column">
          <div class="datapointgreen datapoint" id="id1115"></div>
          <table class="tooltip" style="display:none" id="tooltip1115">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>2</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>1</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>


















<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Shivam Trivedi · Answer 3 · 16 октября 2019

Вместо идентификатора мы можем использовать класс. Используя это (оператор собственной ссылки), мы можем получить дочерний элемент с всплывающей подсказкой класса функцией find (), которая просматривает дочерние элементы.

  $(document).on("mouseenter", ".datapoint", function() {
    $(this).find(".tooltip").show();
  });
  $(document).on("mouseleave", ".datapoint", function() {
    $(this).find(".tooltip").hide();
  });

Gildas.Tambo · Answer 4 · 16 октября 2019

используйте классы вместо идентификаторов, и для этого вам не нужен javascript, все, что вам нужно, это css

.tooltip{display:none}/*use this instead of the inline-styling*/

[id^="id"]:hover + [id^="tooltip"]{
  display:block;
}

, вот демо

#mainContent .thirdRow .column {
  display: inline-block;
  position: relative;
}

#mainContent .LatestResults {
  color: #919191;
  font-weight: bold;
  padding-right: 5px;
  padding-top: 8px;
  padding-left: 10px;
  font-size: 15px;
  text-align: center;
  vertical-align: middle;
}

#mainContent .resultData .tooltip {
  height: 100px;
  width: 100px;
  top: 20px;
  left: 50%;
  transform: translateX(-45%);
  position: absolute;
  text-align: center;
  vertical-align: middle;
  float: left;
  background-color: #ADADAD;
  color: #FFF;
  border-radius: 10px;
  padding-top: 10px;
  z-index: 5;
}

#mainContent .resultData {
  padding-right: 6px;
  padding-left: 3px;
  padding-top: 6px;
  vertical-align: middle;
  float: left;
  z-index: -1;
}

#mainContent .datapointred {
  display: inline-block;
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #FF5B5B;
  vertical-align: middle;
  -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
}

#mainContent .datapointgreen {
  display: inline-block;
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #00DC8E;
  vertical-align: middle;
  -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
}

#mainContent .datapointblue {
  display: inline-block;
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #4B49AE;
  vertical-align: middle;
  -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91);
  -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91);
  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91);
}
.tooltip{display:none}
[id^="id"]:hover + [id^="tooltip"]{
  display:block;
}

<body>

  <div id="mainContent">

    <div class="thirdRow">

      <div class="resultData column">


        <div class="resultWrapper10 column">
          <div class="datapointgreen datapoint" id="id10"></div>
          <table class="tooltip" style="" id="tooltip10">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>2</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>0</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper18 column">
          <div class="datapointgreen datapoint" id="id18"></div>
          <table class="tooltip" id="tooltip18">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>1</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>6</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper21 column">
          <div class="datapointblue datapoint" id="id21"></div>
          <table class="tooltip" id="tooltip21">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>1</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>1</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper37 column">
          <div class="datapointgreen datapoint" id="id37"></div>
          <table class="tooltip" id="tooltip37">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>1</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>2</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper45 column">
          <div class="datapointgreen datapoint" id="id45"></div>
          <table class="tooltip" id="tooltip45">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>0</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>3</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper1110 column">
          <div class="datapointred datapoint" id="id1110"></div>
          <table class="tooltip" id="tooltip1110">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>2</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>1</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper53 column">
          <div class="datapointgreen datapoint" id="id53"></div>
          <table class="tooltip" id="tooltip53">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>5</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>0</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper65 column">
          <div class="datapointgreen datapoint" id="id65"></div>
          <table class="tooltip" id="tooltip65">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>0</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>2</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper1115 column">
          <div class="datapointgreen datapoint" id="id1115"></div>
          <table class="tooltip" id="tooltip1115">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>2</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>1</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>

Shree · Answer 5 · 16 октября 2019

Используйте подстановочный знак для идентификатора, когда mouseenter, mouseleave. Поймайте идентификатор, чтобы показать подсказку и на основе этого скрыть шоу.

let $id = $("[id^=id]");
let id = '';
$('.tooltip').hide();
$id.mouseenter(function() {
  id = $(this).attr('id').split('id')[1];
  $("#tooltip" + id).show();
}).mouseleave(function() {
  $("#tooltip" + id).hide();
});

#mainContent .thirdRow .column {
  display: inline-block;
  position: relative;
}

#mainContent .LatestResults {
  color: #919191;
  font-weight: bold;
  padding-right: 5px;
  padding-top: 8px;
  padding-left: 10px;
  font-size: 15px;
  text-align: center;
  vertical-align: middle;
}

#mainContent .resultData .tooltip {
  height: 100px;
  width: 100px;
  top: 20px;
  left: 50%;
  transform: translateX(-45%);
  position: absolute;
  text-align: center;
  vertical-align: middle;
  float: left;
  background-color: #ADADAD;
  color: #FFF;
  border-radius: 10px;
  padding-top: 10px;
  z-index: 5;
}

#mainContent .resultData {
  padding-right: 6px;
  padding-left: 3px;
  padding-top: 6px;
  vertical-align: middle;
  float: left;
  z-index: -1;
}

#mainContent .datapointred {
  display: inline-block;
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #FF5B5B;
  vertical-align: middle;
  -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
}

#mainContent .datapointgreen {
  display: inline-block;
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #00DC8E;
  vertical-align: middle;
  -webkit-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  -moz-box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
  box-shadow: 0px 1.5px 1px 0px rgba(0, 0, 0, 0.91);
}

#mainContent .datapointblue {
  display: inline-block;
  margin-left: 12px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #4B49AE;
  vertical-align: middle;
  -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91);
  -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91);
  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.91);
}

<body>
  <div id="mainContent">
    <div class="thirdRow">
      <div class="resultData column">
        <div class="resultWrapper10 column">
          <div class="datapointgreen datapoint" id="id10"></div>
          <table class="tooltip" style="" id="tooltip10">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>2</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>0</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper18 column">
          <div class="datapointgreen datapoint" id="id18"></div>
          <table class="tooltip" style="display:none" id="tooltip18">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>1</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>6</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper21 column">
          <div class="datapointblue datapoint" id="id21"></div>
          <table class="tooltip" style="display:none" id="tooltip21">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>1</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>1</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper37 column">
          <div class="datapointgreen datapoint" id="id37"></div>
          <table class="tooltip" style="display:none" id="tooltip37">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>1</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>2</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper45 column">
          <div class="datapointgreen datapoint" id="id45"></div>
          <table class="tooltip" style="display:none" id="tooltip45">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>0</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>3</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper1110 column">
          <div class="datapointred datapoint" id="id1110"></div>
          <table class="tooltip" style="display:none" id="tooltip1110">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>2</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>1</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper53 column">
          <div class="datapointgreen datapoint" id="id53"></div>
          <table class="tooltip" style="display:none" id="tooltip53">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>5</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>0</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper65 column">
          <div class="datapointgreen datapoint" id="id65"></div>
          <table class="tooltip" style="display:none" id="tooltip65">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>0</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>2</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="resultWrapper1115 column">
          <div class="datapointgreen datapoint" id="id1115"></div>
          <table class="tooltip" style="display:none" id="tooltip1115">
            <tbody>
              <tr>
                <td>Hometeam</td>
                <td>2</td>
                <td>3 (1)</td>
              </tr>
              <tr>
                <td>hometeam</td>
                <td>1</td>
                <td>2 (1)</td>
              </tr>
              <tr>
                <td>Venue</td>
                <td>Emirates</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Jogi Mehul · Answer 6 · 16 октября 2019

Попробуйте код ниже, пожалуйста

<script>
    $(document).ready(function () {
        $(document).on("mouseover", ".datapoint", function () {
            $(this).parent().find(".tooltip").show();
        });
        $(document).on("mouseleave", ".datapoint", function () {
            $(this).parent().find(".tooltip").hide();
        });
    });
</script>

Как я могу определить селекторы jQuery динамически?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 6 ]

Все еще используете JavaScript

Использование CSS вместо

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Как я могу определить селекторы jQuery динамически?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 6 ]

Все еще используете JavaScript

Использование CSS вместо

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Нет похожих вопросов