0

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

$('.010203').click(function() {
  alert('010203');
});

$('.010204').click(function() {
  alert('010204');

});

$('.010205').click(function() {
  alert('010205');

});
#numbers {
  margin-left: 2%;
  float: left;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 45%;
  height: 45px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-image: url(../img/gold_plus.png);
  background-repeat: no-repeat;
  background-position: right;
  padding-left: 7px;
}
.number_n {
  color: #6a2f8d;
  font-weight: bold;
  font-size: 18px;
  margin-top: -14px;
}
.cat_name {
  color: #afafaf;
  font-size: 12px;
  margin-top: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id='numbers' class='010203'>
  <p class='cat_name'>Простые</p>
  <p class='number_n'>010203</p>
</div>

<div id='numbers' class='010204'>
  <p class='cat_name'>Простые</p>
  <p class='number_n'>010204</p>
</div>


<div id='numbers' class='010205'>
  <p class='cat_name'>Простые</p>
  <p class='number_n'>010205</p>
</div>

JSFIDDLE

Заранее благодарю за помощь.

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 8 мая 2015 в 6:39

3 ответа 3

2

ID должен быть уникальным.
Лучше numbers сделать классом, а номера поместить в атрибут data-* и всё это поместить в обёртку.
Так:

$(function(){
  $('.wrapper').on('click', '.numbers', function(e){ // Навешиваем обработчик на раппер, а не на каждый элемент
    var $this = $(this); // Получаем jQuery-объект целевого блока, в this - сам объект
    alert($this.data('num'));
  })
});
.numbers {
  margin-left: 2%;
  float: left;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 45%;
  height: 45px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-image: url(../img/gold_plus.png);
  background-repeat: no-repeat;
  background-position: right;
  padding-left: 7px;
}
.number_n {
  color: #6a2f8d;
  font-weight: bold;
  font-size: 18px;
  margin-top: -14px;
}
.cat_name {
  color: #afafaf;
  font-size: 12px;
  margin-top: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class='wrapper'>
  <div class='numbers' data-num='010203'>
    <p class='cat_name'>Простые</p>
    <p class='number_n'>010203</p>
  </div>

  <div class='numbers' data-num='010204'>
    <p class='cat_name'>Простые</p>
    <p class='number_n'>010204</p>
  </div>


  <div class='numbers' data-num='010205'>
    <p class='cat_name'>Простые</p>
    <p class='number_n'>010205</p>
  </div>
<div>

1

Правильнее было указать уникальные номера как атрибут "id" и присвоить каждому элементу класс numbers, тогда js код выглядел бы так:

$('.numbers').click(function(event){
    alert(event.currentTarget.id);
});

$('.numbers').click(function(event){
    alert(event.currentTarget.id);
});
.numbers{
    margin-left: 2%;
    float: left;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 45%;
    height:45px;
    border:1px solid #ccc;
    border-radius:3px;
    background-image: url(../img/gold_plus.png);
    background-repeat: no-repeat;
    background-position: right;
    
    padding-left: 7px;
}
.number_n{
    color:#6a2f8d;
    font-weight: bold;
    font-size: 18px;
    margin-top:-14px;
}
.cat_name{
    color:#afafaf;
    font-size: 12px;
    margin-top:4px;
}
<div id='010203' class='numbers'>
    <p class='cat_name'>Простые</p>
    <p class='number_n'>010203</p>
</div>
 
<div id='010204' class='numbers'>
    <p class='cat_name'>Простые</p>
    <p class='number_n'>010204</p>
</div>

 
<div id='010205' class='numbers'>
    <p class='cat_name'>Простые</p>
    <p class='number_n'>010205</p>
</div>

https://jsfiddle.net/288Luf42/3/

0

Возможно так: во-первых, для div id='numbers' нужно присвоить одинаковый class = 'clickableDiv', например. Затем оставить только:

$('div.clickableDiv').click( function() {
  alert($(this).children('.number_n').html());
});

Или же можно так:

$("div[id='numbers']").click( function() {
    alert($(this).attr('class'));
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.