Question

我如何在每個盒子中放置獨特的價值？

我將在下面放置一個鏈接。

例如：用戶點擊+，出現一個模態。
他從select中選擇一個值並提交。
然後將所選值打印在用戶在+上按下的框中。

https://codepen.io/anon/pen/rmbWdY

$(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