如何单击获取具有相同类的2个不同数据集

I basically on click need to insert the data- into a form. The issue is that both forms use the same element classes and when I perform one function it inserts the data but as soon as I click to run the other function it clears the original data. Here is my code:

我基本上点击需要将数据插入表单。问题是两个表单都使用相同的元素类,当我执行一个函数时,它会插入数据,但是一旦我点击运行另一个函数,它就会清除原始数据。这是我的代码:

HTML

<div class="inbox-widget nicescroll mx-box">
    <a data-dismiss="modal" data-toggle="modal" href="#con-close-modal">
        <div class="inbox-item" data-tag="Followers" data-social_type="twitter">
            <p class="inbox-item-date">Click to add</p>
        </div>
        <div class="inbox-item" data-tag="Friends" data-social_type="twitter">
            <p class="inbox-item-date">Click to add</p>
        </div>
    </a>
    <a data-dismiss="modal" data-toggle="modal" href="#con-close-modal">
    <div class="inbox-item2" id="chosen_account" data-social_id="12345">         
    <p class="inbox-item2-date">Click to add social ID</p>
    </div>
    </a>
    <a data-dismiss="modal" data-toggle="modal" href="#con-close-modal">
    <div class="inbox-item" id="chosen_account" data-social_id="6789">         
    <p class="inbox-item-date">Click to add social ID</p>
    </div>
    </a>
</div>


<form>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="input" id="social_id" type="text" name="social_id" />
<input type="input" id="social_type" type="text" name="social_type" />
<input type="input" id="chart_type" type="text" name="chart_type" value="line"/>
<input type="input" id="chart_tag" type="text" name="chart_tag"/>
</form>

My Jquery:

$('.inbox-item').click(function() {
      var social_type_value = $(this).data('social_type');
      var social_type_input = $('#social_type');
      social_type_input.val(social_type_value);

      var chart_tag_value = $(this).data('tag');
      var chart_tag_input = $('#chart_tag');
      chart_tag_input.val(chart_tag_value);

      var social_id_value = $(this).data('social_id');
       var social_id_input = $('#social_id');
       social_id_input.val(social_id_value);
    });

I also created a fiddle to show whats happening: https://jsfiddle.net/p18f3dow/1/

我还创建了一个小提琴,以显示发生的事情:https://jsfiddle.net/p18f3dow/1/

1 个解决方案

#1

if i got your problem right, you'd want to use one function - but depending on the clicked element add different data... but don't overwrite the already entered data, when clicked element don't contains relevant data...

如果我的问题正确,你想要使用一个函数 - 但是根据点击的元素添加不同的数据......但是当点击的元素不包含相关数据时,不要覆盖已经输入的数据...

why not checking, if the data tag exists, in the first place:

为什么不首先检查数据标签是否存在:

$('.inbox-item').click(function() {
  if ($(this).data('social_type')) {
    var social_type_value = $(this).data('social_type');
    var social_type_input = $('#social_type');
    social_type_input.val(social_type_value);
  }

  if ($(this).data('tag')) {
    var chart_tag_value = $(this).data('tag');
    var chart_tag_input = $('#chart_tag');
    chart_tag_input.val(chart_tag_value);
  }
  if ($(this).data('social_id')) {
    var social_id_value = $(this).data('social_id');
    var social_id_input = $('#social_id');
    social_id_input.val(social_id_value);
  }
});

this would be the quick and dirty solution, though.

不过,这将是快速而肮脏的解决方案。

better one would be like storing the complete clicked data objects and iterating through them, filling the correct fields. see https://jsfiddle.net/p18f3dow/4/

更好的方法就是存储完整的点击数据对象并迭代它们,填充正确的字段。见https://jsfiddle.net/p18f3dow/4/

therefore you have to ensure that the part behing the data- in your html always matches your id in the form. (had to change it from data-tag to data-chart_tag)

因此,您必须确保在html中对数据进行数据处理的部分始终与表单中的id匹配。 (必须将其从data-tag更改为data-chart_tag)

then all you need is a simple function like that:

那么你需要的只是一个简单的函数:

  $('.inbox-item').click(function() {    //when clicked
      var stored_data = $(this).data();  //save everything in an object     
      for (var key in stored_data) {     //iterate through the object
        if (stored_data.hasOwnProperty(key)) {
          $('#' + key).val(stored_data[key]) //create an id with #+key and insert the value
        }
      }
    });

#1