jQuery select 在外部起作用，但在 swipeR 内部不起作用

问题描述 投票：0回答：1

我尝试将 select2 放入 R 代码中 (

swipeR
)，但它不起作用。当我把 select2 拿出来时，它工作正常。看代码：

library(shiny)

ui <- fluidPage(
  
  HTML(
    '<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
    </head>'
  ),
  
  swipeR::swipeR(
    id = "carouselSwotContainer1",
    initialSlide = 1,
    bulletsSize = NULL,
    loop = FALSE,
    width = "398px",
    height = "288px",
    effect = "cube",
    cubeEffect = list(shadowScale = .9),
    speed = 1000,
    rewind = TRUE,
    wrapper = swipeR::swipeRwrapper(
      
      div(
        
        class = "swiper-no-swiping",
        
        HTML(
          "<!-- select2 YOUR COMPANY ADVANTAGE-->
          <div style='grid-column: span 6;'>

    <div id='selectTwoDivA1' class='selectTwoDivClassA1' style='margin-top: 10px;'>

        <div class='inputLabelClass' style='position: relative; top: -5px;'>
            <i class='fas fa-disease' style='color: #4bf542;'></i> select2 Test (problem)
        </div>

        <select id='selectjquery1' multiple='multiple'></select>

    </div>

    <span id='placeholderTextInput1' style='display: none;'>TEXTO 1</span>
    <span id='selectResultText1' style='display: none;'>TEXTO 2</span>

    <style>
        #selectTwoDivA1 .select2-selection--multiple {
            border: 2px solid #4bf542 !important;
        }

        .selectTwoDivClassA1 .select2-selection--multiple {
            background-color: unset !important;
            color: #333333;
            width: 250px !important;
            height: 70px !important;
        }
    </style>

    <script>
        $(document).ready(function() {

            function updateSelectAdvantageA1(placeholderText1, textTooShort1) {
                $('#selectjquery1').select2({
                    placeholder: placeholderText1,
                    allowClear: true,
                    closeOnSelect: true,
                    minimumInputLength: 3,
                    maximumInputLength: 20,
                    maximumSelectionLength: 3,
                    tags: true,
                    language: {
                        maximumSelected: function (e) {
                            let text = 'Você pode atribuir apenas ' + e.maximum + ' vantagens.';
                            e.maximum != 1 && (text += 's.');
                            return text;
                        },
                        inputTooShort: function() {
                            return textTooShort1; // Corrigido aqui
                        }
                    }
                });
            }

            function updateSelectAdvantageB1() {
                let placeholderText1 = $('#placeholderTextInput1').text();
                let textTooShort1 = $('#selectResultText1').text();
                updateSelectAdvantageA1(placeholderText1, textTooShort1);
            }

            updateSelectAdvantageB1();

        });
    </script>
      </div>
      "
        )
        
      )
      
    )
    
  ),
  
  HTML(
    "<!-- select2 YOUR COMPANY ADVANTAGE-->
          <div style='grid-column: span 6;'>

    <div id='selectTwoDivA1' class='selectTwoDivClassA1' style='margin-top: 10px;'>

        <div class='inputLabelClass' style='position: relative; top: -5px;'>
            <i class='fas fa-disease' style='color: #4bf542;'></i> select2 Test (works)
        </div>

        <select id='selectjquery1' multiple='multiple'></select>

    </div>

    <span id='placeholderTextInput1' style='display: none;'>TEXTO 1</span>
    <span id='selectResultText1' style='display: none;'>TEXTO 2</span>

    <style>
        #selectTwoDivA1 .select2-selection--multiple {
            border: 2px solid #4bf542 !important;
        }

        .selectTwoDivClassA1 .select2-selection--multiple {
            background-color: unset !important;
            color: #333333;
            width: 250px !important;
            height: 70px !important;
        }
    </style>

    <script>
        $(document).ready(function() {

            function updateSelectAdvantageA1(placeholderText1, textTooShort1) {
                $('#selectjquery1').select2({
                    placeholder: placeholderText1,
                    allowClear: true,
                    closeOnSelect: true,
                    minimumInputLength: 3,
                    maximumInputLength: 20,
                    maximumSelectionLength: 3,
                    tags: true,
                    language: {
                        maximumSelected: function (e) {
                            let text = 'Você pode atribuir apenas ' + e.maximum + ' vantagens.';
                            e.maximum != 1 && (text += 's.');
                            return text;
                        },
                        inputTooShort: function() {
                            return textTooShort1; // Corrigido aqui
                        }
                    }
                });
            }

            function updateSelectAdvantageB1() {
                let placeholderText1 = $('#placeholderTextInput1').text();
                let textTooShort1 = $('#selectResultText1').text();
                updateSelectAdvantageA1(placeholderText1, textTooShort1);
            }

            updateSelectAdvantageB1();

        });
    </script>
      </div>"
  )
  
)

server <- function(input, output) {
  
}

shinyApp(ui, server)

也就是说，在swipeR内部，select2不起作用，但在外部却可以正常工作。

javascript r shiny
1个回答
0
投票

尝试将 

select2
小部件放入具有类 
"swiper-no-swiping"
的容器中。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.