Question

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

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>

我的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);
    });

我还创造了一个小提琴来展示发生的事情：https://jsfiddle.net/p18f3dow/1/

Answer 1

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

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

$('.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);
  }
});

但是，这将是一个快速而肮脏的解决方案。

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

因此，您必须确保html中的数据部分 - 始终与表单中的ID匹配。（必须将其从data-tag更改为data-chart_tag）

然后你需要的只是一个简单的函数：

  $('.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
        }
      }
    });

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

1 个答案: