Question

我有一个非常基本的问题，但我无法找到答案，因为我不知道该搜索到底是什么。

我在页面上插入了几个更多阅读按钮。通过单击一个，将显示更多文本，读取更多按钮消失，并显示一个无读数按钮。

为此，这个JQuery代码对我来说很好用：

 def digest(string)
    cost = ActiveModel::SecurePassword.min_cost ? BCrypt::Engine::MIN_COST :
                                                  BCrypt::Engine.cost
    BCrypt::Password.create(string, cost: cost)
  end

由于我确实有一些按钮，我想做一个循环，所以我不必每次都复制代码。问题是我（据我所知）不能使用类和.each（）函数，因为每个read more按钮都有自己独特的文本。是否有任何形式的“for-loop”我可以用来做这个伎俩？

提前致谢！干杯彼得

Answer 1

我认为readmoretext2可以从readmore2导航到$('.readmore').click(function(){ $(this).children('.readmoretext').toggle() })。你应该这样做。例如，如果是孩子：

var documentsPath = System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal);

            using (var imageStream = new MemoryStream())
            {
                await image.CompressAsync(Bitmap.CompressFormat.Jpeg, 40, imageStream);
                image.Recycle();
                imageBytes = imageStream.ToArray();
                var thumbnail =await DependencyService.Get<IPicResizer>().GetResizedImage(imageBytes);

                // Temporary file to store the downloaded image
                Java.IO.File tmpFile = new Java.IO.File(documentsPath + "/"+fileName + ".jpg");
                tmpFile.ParentFile.Mkdirs();
               // String path = MediaStore.Images.Media.InsertImage(this.Context.ContentResolver, documentsPath, fileName, ""); //(this.Context.ContentResolver, image, imgName.ToString(), null);
                uri = Android.Net.Uri.Parse(tmpFile.Path);
                // The FileOutputStream to the temporary file
                var fOutStream = new FileOutputStream(tmpFile);              

                try
                {
                    fOutStream.Write(thumbnail, 0, thumbnail.Length);

                    fOutStream.Flush();

                    fOutStream.Close();
                    DialogService.HideLoading();
                    DialogService.ShowSuccess("Saved picture at: " + uri.ToString());

                }
                catch (Java.IO.FileNotFoundException ex)
                {
                    DialogService.ShowError(ex.InnerException.Message);
                }
                catch (Java.IO.IOException ex)
                {
                    DialogService.ShowError(ex.InnerException.Message);
                }

                camera.StartPreview();
                await App.Current.MainPage.Navigation.PushModalAsync(new InfoPage(imageBytes, tmpFile.AbsolutePath), false);
            }

Answer 2

虽然for循环或jQuery的each肯定可以用于此目的，但类似乎是您最好的选择。确切的实现细节取决于您对DOM的了解。

例如，如果您能够看到总是有一个容器封装了所有目标元素，但没有一个元素用于另一个切换，那么您可以仅在该容器中搜索类：

$('.toggle-read').click(function(e) {
    e.preventDefault();
    var container = $(this).closest('.read-container');
    container.find('.toggle-read, .read-more-text').toggle();
});

Fiddle

可能还有其他布局可以进行其他假设，您必须以另一种方式遍历DOM，但这是一般的想法。但是，如果不能对DOM进行任何假设，则可能必须回退到data-属性。这样的解决方案看起来像这样：

$('.toggle-read').click(function(e) {
    e.preventDefault();

    $($(this).data('target')).toggle();
    $($(this).data('other-button')).show();
    $(this).hide();
});

给出以下标记：

<a href="#" id="readmore-1" class="toggle-read more" data-target="#moretext-1" data-other-button="#readless-1">Read more</a>
<a href="#" id="readless-1" class="toggle-read less" data-target="#moretext-1" data-other-button="#readmore-1">Read less</a>

Fiddle

Answer 3

你在找这个，

$(".readmore").click(function(){
    $(this).siblings('p').slideDown();
});
$(".readless").click(function(){
    $(this).siblings('p').slideUp();
});

DEMO

使用迭代号的ID的JQuery循环

3 个答案: