Question

如何在每个框中添加唯一值？

我将在下面举例说明链接。

示例：用户点击+，会出现一个模态他从select中选择一个值并提交。
然后在用户按下+上的那个框中打印所选值。

$(document).ready(function() {
  $( ".pat" ).append( $( "<span class='glyphicon glyphicon-plus' aria-hidden='true' data-toggle='modal' data-target='#myModal'></span>"));
  $result = $('#result p');
  $("#btnsubmit").click(function() {
    $(".bl1 .glyphicon").hide();
    var text = $("#sel1 option:selected").text();
    $result.text(text);
  });
  $("input[type='radio']").change(function() {
    if ($(this).val() == 90) {
      $result.removeClass('r45').addClass('r90');
    } else {
      $result.removeClass('r90').addClass('r45');
    }
  });
});
function readURL(event){
  var getImagePath = URL.createObjectURL(event.target.files[0]);
  $('.bg').css('background-image', 'url(' + getImagePath + ')');
}

Answer 1

我用你的奇怪网格玩了一下。

要在每个框中包含 唯一编号 ，您必须删除所选的编号并将其替换为另一个编号。
Math函数非常方便。
请注意，此解决方案中的数字并不是唯一的......它们是随机的。

然后，要将数字放在右侧框中，我添加了.glyphicon（+符号）点击处理程序以获取元素参考。
在这个处理程序中，我创建了一个span来替换+符号......为了准备一个可以旋转的元素来接收所选的数字。

我在收音机选项中添加了“水平”...默认选中。

所以这是代码：
CodePen

$(document).ready(function() {

  var clickedPlus;

  $(document).on("click",".glyphicon",function(){
    clickedPlus = $(this).closest("div");
    var newSpan = $("<span>");
    clickedPlus.html(newSpan);
  });

  // When modal is close without submit
  $(".close").on("click",function(){
    clickedPlus.html( $( "<span class='glyphicon glyphicon-plus' aria-hidden='true' data-toggle='modal' data-target='#myModal'></span>") );
  });

  $( ".pat" ).append( $( "<span class='glyphicon glyphicon-plus' aria-hidden='true' data-toggle='modal' data-target='#myModal'></span>"));

  $result = $('#result p');

  $("#btnsubmit").click(function() {
    $(".bl1 .glyphicon").hide();
    var text = $("#sel1 option:selected").text();
    $("#sel1 option:selected").text(Math.round(Math.random()*10000));
    //$result.text(text);
    clickedPlus.find("span").text(text);
  });

  $("input[type='radio']").change(function() {
    if ($(this).val() == 90) {
      //$result.removeClass('r45').addClass('r90');
      clickedPlus.find("span").removeClass('r45').addClass('r90');
    } else if ($(this).val() == 45) {
      //$result.removeClass('r90').addClass('r45');
      clickedPlus.find("span").removeClass('r90').addClass('r45');
    } else{
      clickedPlus.find("span").removeClass('r90').removeClass('r45');
    }
  });
});   // ready


function readURL(event){
  var getImagePath = URL.createObjectURL(event.target.files[0]);
  $('.bg').css('background-image', 'url(' + getImagePath + ')');
}

Answer 2

获取列表中的元素位置，并将值

附加到该元素

$(document).ready(function() {
  $(".pat").append($("<span class='glyphicon glyphicon-plus' ></span><span class='text'></span>"));//add a span with the class .text
  $(".pat:not(.bl1)").click(function() {
    var ind = $(this).index();//get the column position
    var vind = $(this).parent().attr('class'); get the row class

    $('#myModal').attr('data-ind', ind).attr('data-vind', vind).modal('show');//pass the values to the modal window
  })
  $result = $('#result p');
  $("#btnsubmit").click(function() {
    var ind = $(this).closest('.modal').attr('data-ind');//get the values
    var vind = $(this).closest('.modal').attr('data-vind');

    var text = $("#sel1 option:selected").text();
    $result = $('.' + vind).find('.pat').eq(ind);//select the right element from the list
    $result.find(".glyphicon").hide();
     $result.find('.text').text(text);
  });
    $("input[type='radio']").change(function() {
     var ind = $(this).closest(".modal").attr("data-ind");
     var vind = $(this).closest(".modal").attr("data-vind");
     $result = $("." + vind).find(".pat").eq(ind);
     if ($(this).val() == 90) {
       $result.find('.text').removeClass("r45").addClass("r90");
     } else {
       $result.find('.text').removeClass("r90").addClass("r45");
     }
  });

});

function readURL(event) {
  var getImagePath = URL.createObjectURL(event.target.files[0]);
  $('.bg').css('background-image', 'url(' + getImagePath + ')');
}

演示：https://codepen.io/anon/pen/EmJZrY

我怎样才能在每个盒子里放出独特的价值？

2 个答案: